随着互联网的普及,越来越多的用户选择使用第三方账号登录网站,比如使用微信、QQ、GitHub、Google 等账号登录。而现在很多网站的后台系统中,使用的是 Node.js 平台下的 Koa 框架。因此,实现 Koa 中的第三方登录系统,成为了前端开发同学必须要掌握的技能之一。
在本文中,我们将以 OAuth2.0 作为授权协议,详细讲解如何在 Koa 中使用 OAuth2.0 实现第三方登录系统。
什么是 OAuth2.0
OAuth 是一种授权协议,它允许用户授权一个应用程序访问他们的信息,而无需将用户名和密码提供给第三方应用。OAuth2.0 是 OAuth 协议的第二个版本,是目前使用最广泛的授权协议。
OAuth2.0 把授权过程分成了两个步骤:
- 获取授权码。 用户在浏览器中打开第三方网站,点击登录按钮,然后被重定向到授权服务器,授权服务器要求用户登录。用户登录后,授权服务器向用户询问是否允许第三方应用访问自己的信息。如果用户同意,授权服务器将授权码发送给第三方网站。
- 获取访问令牌。 第三方网站用授权码向授权服务器申请访问令牌(access_token)。授权服务器向第三方网站发送访问令牌,第三方网站就可以凭借访问令牌向资源服务器请求用户信息。
在 Koa 中使用 OAuth2.0
安装依赖
在使用 OAuth2.0 实现第三方登录之前,我们需要安装相关依赖。
我们需要用到的依赖有:
koa
和koa-router
:Koa 开发框架及其路由模块。request
和request-promise-native
:创建 HTTP 请求。jsonwebtoken
:生成 JSON Web Token。dotenv
:设置环境变量。
--- ------- --- ---------- ------- ---------------------- ------------ ------ ------
设置环境变量
为了保护敏感信息,我们应当把它们保存在环境变量中。
在项目根目录下创建一个.env
文件,并写入以下内容:
- -- ------ --- ------ -- - ------ ------ ---------------- - ---------- -------------------- - -------------------------------- - -- --- --------- ---------- - --------- -------------- - --
创建 OAuth 路由
在 Koa 中使用 OAuth2.0 实现第三方登录,需要创建两个路由:
- 授权码路由。 用户在浏览器中访问该路由,进行身份验证和授权,拿到授权码。
- 访问令牌路由。 使用授权码向授权服务器申请访问令牌(access_token)。
我们先创建一个oauth.js
文件,用于实现 OAuth 相关的路由。
----- --- - ------------------------ ----- ------ - ---------------------- ----- ------- - ---------------------------------- ----- ------ - ------------------ ---------------- ----- ------ - --- --------- ------------------------ ----- ----- ----- -- - -- - ------ ------------ ----- ----- - ------------------------------------- -- ------- --- -- ------ - ------------------------------ ------ - ------- -- - ----- -- ------ --- -- - --------- ---- -- ----- ---------- --- ------ --- ------------------------------- ----------------------- - --------- ---- -- ----- ---------- --- ------ --- -- ---- ------ ---- ----- ------ - ----------------------------------------------------------- ----- ------------ - ----------------------------------------------------- --------------------------- ----- ------- --- ----------------------- ----- ----- ----- -- - -- ---- --- --- ------ ----- ----- ------------ - -------------------------------- -- ----------------------- --- ------------- - ----- --- -------------- -------- ------ - -- -------- ------ ----- ----- ----- - ------------------------------- -- ---------------- --- ------ - ----- --- -------------- -------- - -- ------ ------ ------ ----- - ---- - - ---------- ----- ------ - -------------------------------------------- - ---------------------------------------------------- - --------------- ----- -------- - -------------------------------------------------------- ----- -------- - ----- --------- ------- ------- ---- --------- -------- - --------- ------------------ - --- ----- - ------------ - - --------------------- -- -- ------ ---- ----- ------- - ------------------------------ ----- ------- - ----- --------- ------- ------ ---- -------- -------- - ------------- ------------ ---------------- ------- ---------------- -- ----- ---- --- ----- - --- ----- ----- - - -------- -- -- ------------ --- - ------- - ----- ------- - - --- ----- ----- -- ----- ----- - ----------------- ----------------------- - ---------- -------------------------- --- -- ----- ------ --- -- --- - ----- ----------- - --------------------------------- -------------------------- ----- ------- --- -------------- - -------
我们分析一下上述代码:
- 在授权码路由中,我们根据 GitHub 的授权协议定义了授权链接,并将随机生成的状态码和回调 URL 写入 Cookie 中。
- 在访问令牌路由中,我们通过验证回调 URL 和状态码的方式来捕获非法请求。如果验证通过,我们将使用授权码向 GitHub 请求访问令牌,并使用访问令牌拉取 GitHub 用户的信息。最后,我们将生成的 JWT 写回回调 URL。
创建用户路由
接下来,我们要创建一个用户路由,用于检查 JWT 的有效性,并返回用户信息。
以下是示例代码:
----- ------ - ---------------------- ----- --- - ------------------------ ----- ------ - ------------------ ---------------- ----- ------ - --- --------- ------------------- ----- ----- ----- -- - -- - ------ --- --- ----- ----- - ------------------------- -- -------- - ----- --- --------------------- --------- - --- - -- -- --- ------------ ----- ------- - ----------------- ------------------------ ----- ---- - - --- ----------- ----- ------------- ------ ------------- -- -- ------ -------- - ----- - ----- ----- - ----- --- --------------------- --------- - ----- ------- --- -------------- - -------
启动应用程序
现在,我们已经定义好了所有的路由,接下来我们需要启动应用程序,以便我们可以在浏览器中测试上述代码是否工作正常。
以下是示例代码:
----- --- - --------------- ----- ---------- - -------------------------- ----- ------ - ------------------ ----- ----- - -------------------------- ----- ---- - ------------------------- ---------------- ----- --- - --- ------ ---------------------- ------------------------ ----------------------- ---------------------------- -- -- - ------------------- -- ------- -- ---- ---------------------- ---
启动应用程序的时候,应当将环境变量配置完成,并将相应的端口号写入环境变量中:
- ------- ------------ -- ------- - - ------------ -------- ------- --------- --- --- ---------
测试应用程序
在浏览器中打开http://localhost:3000/authorize?redirect_uri=http://localhost:3000/user
,这时候你会被重定向到 GitHub 授权页面。在该页面上点击Authorize
按钮,会返回一个带有 JWT 的浏览器重定向地址。将该地址复制到浏览器地址栏中,即可看到用户信息。
总结
在本文中,我们已经详细讲解了如何在 Koa 中使用 OAuth2.0 实现第三方登录系统。我们创建了 OAuth 路由和用户路由,同时还学习了如何捕获非法请求和如何生成 JSON Web Token。我们相信通过本文的学习,同学们已经有了足够的技能来实现自己的第三方登录系统。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6450a185980a9b385b99b24f