前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 第三方注册登录

现在很多网站、APP都支持第三方登录。第三方登录不得不说的一个优势:那就是本地注册和第三方注册的选择。虽然这是一个不能称之为问题的问题,做为一个新用户,你有两个选择:1、做一个很受欢迎的用户,注册帐号,完善信息,over。2、选用第三方登录/注册,简单方便。二者供你选择,随心挑选。而我们作为一名技术人员,第三方注册登录就选择了 github。

# OAuth 2.0

说到第三方登录,不得不提的一个知识点就是 oauth 2.0。

OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用。

这个协议在认证和授权的时候涉及到:

  • 服务提供方,例如 GitHub,GitHub上储存了用户的登录名,Email,昵称,头像等信息 用户
  • 客户端,例如我的博客就是一个客户端,需要服务方向我提供用户的一些基本信息

OAuth 协议的认证和授权的过程如下:

  • 用户打开我的网站后,我想要通过GitHub获取该用户的基本信息
  • 在转跳到GitHub的授权页面后,用户同意我获取他的基本信息
  • 后端获得GitHub提供的授权码,使用该授权码向GitHub申请一个令牌
  • GitHub对后端提供的授权码进行验证,验证无误后,发放一个令牌给后端
  • 后端使用令牌,向GitHub获取用户信息
  • GitHub 确认令牌无误,返回给后端基本的用户信息

# 使用GitHub 提供的 OAuth 服务

  1. 登陆 GitHub 官网并注册账号登陆后

  1. 创建一个应用并填写信息

  1. 获得 Client ID 和 Chient Secret

# 配置 GitHub 参数

接下来将这些参数放到 配置文件中:

config.github = {
    // 固定的
    login_url: 'https://github.com/login/oauth/authorize',
    // github Client ID
    client_id: 'xxxxxxxxxxxxxx',
    // github Client Secret
    client_secret: 'xxxxxxxxxxxxx',
    // 此参数表示只获取用户信息
    scope: [ 'user' ],
  };
@前端进阶之旅: 代码已经复制到剪贴板

这样我们不仅可以方便的通过 this.ctx.app.config.github 拿到所需的数据,还有利于多环境的区分,不同环境使用不同的配置。

# 第三方登陆URL

获取 GitHub 授权的 url 并不需要操作我们的数据库,所以在这个流程中,并没有什么逻辑。

# 授权 URL

在这个 方法中我们只需要拼接我们之前定义好的参数即可。

# 返回结果

这就是一个简单的

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏