type
status
date
slug
summary
tags
category
icon
password
上次编辑时间
May 15, 2024 04:55 AM
创建时间
Jan 6, 2024 06:34 AM
参考链接

1.第三方登录的原理

所谓第三方登录，实质就是 OAuth 授权。用户想要登录 A 网站，A 网站让用户提供第三方网站的数据，证明自己的身份。获取第三方网站的身份数据，就需要 OAuth 授权。
举例来说，A 网站允许 GitHub 登录，背后就是下面的流程。
A 网站让用户跳转到 GitHub。GitHub要求用户登录，然后询问"A 网站要求获得 xx 权限，你是否同意？"用户同意，GitHub就会重定向回 A 网站，同时发回一个授权码。A 网站使用授权码，向 GitHub请求令牌。GitHub返回令牌.A 网站使用令牌，向 GitHub请求用户数据。

2.创建应用

跳转创建应用界面
详细⬇️
  1. 进入Github ⬇️
  1. 点击头像 ➡️ Settings
  1. 左侧侧边栏最底下➡️ Developer settings
  1. 左侧侧边栏第二个➡️ OAuth Apps
  1. 右侧内容区➡️ New OAuth App
  1. 填写相关信息
      2. notion image
    1. 点击注册应用后，生成一个Client secrets
        2. notion image
    2. 只会出现一次Client secrets,自己保存好
        3. notion image

3. 示例仓库

我写了一个代码仓库open in new window，请将它克隆到本地。
在app.js中写入自己的自己的clientId和clientSecret
安装依赖并启动服务
浏览器访问http://localhost:3000 ,就可以看到这个示例了。

4.浏览器跳转 GitHub

示例的首页很简单，就是一个链接，让用户跳转到 GitHub。
notion image
跳转的URL为:
  • 请求路径为https://github.com/login/oauth/authorize
  • client_id是必须的
  • redirect_uri是可选的，
    • 不填的前提是在创建应用时添加了完整了回调地址
    • 否者这里就要添加回调地址参数
最后跳转到这个地址

5.用户授权

用户确定授权
notion image
用户确定授权后，会跳转到自己创建的回调地址，我们可以在回调地址内填写自己需要的相关操作

1.获取access_token

在/oauth-callback路由内发送请求获取access_token⬇️
相关参数请查看Github Docs
输出如下内容
access_token保存起来，后面的请求都需要添加 headers->Authorization

2.获取用户信息

同样，接下来在/oauth-callback路由内发送请求获取相关用户信息⬇️
相关参数请查看Github Docs
打印输出⬇️
到这里相关信息就出来了，可以看到用户名,头像链接.
但是可以看到email为null
好像是因为用户没有将邮箱公开
其实也可以获取,请往下看⬇️

3.获取用户邮箱

如果不需要用户邮箱,可以忽略这一步
详细API请看官方文档open in new window
在上面两个请求后面,添加如下内容
打印输出

6.完成授权

接下来就是在路由内继续添加自己的需求，可以是将用户信息保存在数据库

友情提示

当点击授权后,Github以及将你本次的登录状态保存，下一次再测试将不会经过你授权
需要进入应用管理 将状态移除，再执行授权
notion image