为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第18天 使用 OAuth2...

【金秋打卡】第18天 使用 OAuth2 完成用户的登录创建

2022.11.10 22:18 104浏览

课程名称web前端架构师
课程章节:第16周 第七章 使用 OAuth2 协议完成用户创建以及验证功能
主讲老师:张轩
课程内容: 使用 OAuth2 完成用户的登录创建

使用 gitee 进行 OAuth2 认证

首先在 gitee 平台上创建第三方应用 。链接地址为 https://gitee.com/oauth/applications

创建完第三方应用后,将创建应用的 Client ID、Client Secret 和应用回调地址添加到环境变量中,并添加到 config 文件中

gitee OAuth 文档地址 https://gitee.com/api/v5/oauth_doc#/

认证的流程 - 授权码模式

应用通过 浏览器 或 Webview 将用户引导到码云三方认证页面上(get 请求方式)

https://gitee.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code

码云认证服务器通过回调地址{redirect_uri}将 用户授权码 传递给 应用服务器 或者直接在 Webview 中跳转到携带 用户授权码的回调地址上,Webview 直接获取code即可。这里我们可以获取 code 就可以了

应用服务器 或 Webview 使用 access_token API 向 码云认证服务器发送post请求传入 用户授权码 以及 回调地址( POST请求, 请求过程建议将 client_secret 放在 Body 中传值,以保证数据安全。)

https://gitee.com/oauth/token?grant_type=authorization_code&code={code}&client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}

通过上面就拿到了 access_token,就可以访问 open api 的接口了

代码实现

用户访问页面,跳转到授权页面

async giteeOAuth() {
  const { ctx, app } = this;
  const config = app.config.giteeConfig;
  const url = `https://gitee.com/oauth/authorize?client_id=${config.clientId}&redirect_uri=${config.redirectURI}&response_type=code`;
  ctx.redirect(url);
}

用户授权后,就会我们填写的 redirect uri 接口,在这个接口中获取 code,然后通过 code 获取到 access_token 返回给用户

 async oAuthGiteeCallback() {
    const { ctx, service } = this;
    const { code } = ctx.request.query;
    const data = await service.user.getGiteeAccessToken(code);
    ctx.helper.success({
      ctx,
      res: data,
    });
  }

根据 code 获取 access_token

public async getGiteeAccessToken(code: string) {
  const { ctx, app } = this;
  const { cid, secret, redirectURL } = app.config.giteeConfig;
  const { data } = await ctx.curl('https://gitee.com/oauth/token', {
    method: 'post',
    contentType: 'json',
    dataType: 'json',
    data: {
      grant_type: 'authorization_code',
      code,
      client_id: cid,
      redirect_uri: redirectURL,
      client_secret: secret,
    },
  });
  return data;
}

然后通过 access_token 获取,访问 gitee open api 获取用户信息

public async getGiteeUser(access_token: string) {
  const { ctx } = this;
  const { data } = await ctx.curl<GiteeUser>(`https://gitee.com/api/v5/user?access_token=${access_token}`, {
    dataType: 'json',
  });
  return data;
}

使用 Gitee OAuth 实现登录注册功能

用户授权后,会调用我们填写的回调接口,首先我们获取到 code,然后通过 code 获取用户信息

async signByGitee() {
  const { ctx, service } = this;
  const { code } = ctx.request.query;
  const token = await service.user.signByGitee(code);
  ctx.helper.success({
    ctx,
    res: {
      token,
    },
  });
}

拿到 code 以后,我们需要获取用户的 access_token, 然后 获取 gitee 上的信息,查询该用户是否存在,存在就创建token 返回,不存在就创建用户并创建 token 后返回

 public async signByGitee(code: string) {
    const { ctx } = this;
    // 获取 access_token
    const { access_token } = await this.getGiteeAccessToken(code);
    // 获取 gitee 用户
    const giteeUser = await this.getGiteeUser(access_token);
    const User = ctx.model.User;
    const stringGiteeID = giteeUser.id.toString();
    // 查询该 gitee 用户是否存在,存在就直接返回 token
    const user = await User.findOne({ giteeID: stringGiteeID });
    if (user) {
      return this.getToken(user.username);
    }
    const { email, avatar_url } = giteeUser;
    // 创建用户并返回 token
    const newUser = await User.create({
      username: `Gitee${stringGiteeID}`,
      giteeID: stringGiteeID,
      email,
      avatar: avatar_url,
      type: 'gitee',
    });
    return this.getToken(newUser.username);
  }

这样就完成了使用 Gitee OAuth 登录创建用户的功能
图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Python工程师
手记
粉丝
0
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消