在前端开发中，授权认证是不可避免的需求。而 Funwebauth 正是一款方便易用的授权认证 npm 包。通过 Funwebauth，我们可以让用户使用常见的社交账号 (如 Google, Facebook, GitHub 等) 登录我们的网站。
在本篇文章中，我们将详细介绍如何使用 Funwebauth 进行授权认证，并提供一些示例代码帮助你更好地理解其具体实现。
安装
首先，我们需要在项目中安装 Funwebauth 包。可以通过 npm 命令行或者 yarn 来完成：
--- ------- ---------- ------
---- --- ----------
安装成功后，我们就可以在项目中使用 Funwebauth 了。
使用
Funwebauth 的使用非常简单。我们只需要引入包并调用相应的 API 就可以完成授权。不过在进行之前，我们还需要到对应的平台注册应用，获取一些必要的信息。
注册平台应用
Funwebauth 支持多种平台的授权，包括 Google, Facebook, GitHub 等。不过在使用之前，我们需要到对应平台注册应用，并获取应用的客户端 ID 和客户端 Secret 等信息。
以 Google 为例，我们可以通过以下步骤来注册应用：
登录到 Google Cloud Console。
创建一个新的项目。
打开项目的认证信息页面，并创建一个新的 OAuth 客户端 ID。
在创建过程中，指定“已授权重定向 URI”，例如
http://localhost:8080/callback。完成创建后，可以在 OAuth 客户端 ID 页面找到相应的信息，并保存到本地/云端。
完成以上步骤后，我们就可以使用 Funwebauth 进行授权了。
示例代码
以下是一个使用 Funwebauth 进行 Google 登录认证的示例：
------ ---------- ---- ------------- ----- ---------- - --- ------------ --------- ------------------- ------------- ----------------------- ------------ --------------------------------- --- ----- ------------ - -------------------------------------- -------------------------------------- ----- -- -- - ----- ------- - ----- -------------------------------- -------------------- - -------- --- -- ---- --- --- --------------------------- -- ------------ ----- --------- - --- ---------------------------------------- ----- ---- - ---------------------- -- ------ - ----- ----------- - ----- ----------------------------------- ------ ------------------------- -- - ------------- ---------------------- ----------- ------ - -
在上述代码中，我们首先通过 Funwebauth 构造函数传入了基本配置项 (如 clientId, clientSecret, redirectUri) ，并创建了一个实例 funwebauth。随后，我们监听了一个 Google 登录按钮的点击事件，并实现了认证的重定向逻辑。
当用户点击 Google 登录按钮时，我们会通过 funwebauth.getAuthUrl('google') 获取到一个跳转地址，将其赋值给 window.location.href，实现页面跳转到 Google 登录认证页面。
当用户在 Google 登录成功后，Google 将会重定向到我们事先设置的 Callback 地址 (如 http://localhost:8080/callback) 并带上一个 code 参数。我们通过 funwebauth.getAccessToken('google', code) 来获取 access_token 以及其他凭证信息，完成授权认证。
至此，我们就完成了授权认证的基本操作。
总结
本文介绍了 npm 包 Funwebauth 的使用方法，以进行社交账号的授权认证。在使用之前，我们需要注册对应的 OAuth 应用，并在使用时传入相关凭证信息。
Funwebauth 的实现非常简洁，方便我们在项目中快速使用。但是在实际项目中，我们需要进一步地完善授权认证的逻辑，增加错误处理、自定义界面等操作，提升用户的体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005589f81e8991b448d5eb7