续《GitHub OAuth 第三方登录示例教程(阮一峰)》

阮老师的这篇博客通俗易懂,我按照博客内容,仅仅调整了一项就把整个demo顺利跑完了。
将index.js里的

const name = result.data.name;

改为:

const name = result.data.login;

最后可以看到地址内容为:

http://localhost:8080/welcome.html?name=xxxx

网页内容为,其中xxxx为“用户”在GitHub.com里的登录名:

Welcome, xxxx

下面再说说对clientID、clientSecret两个参数的理解。

假设我要新建一个"云冲印"网站,网站假设为http://www.icloudpictures.com,我可以实现自己的用户注册、登录功能。除此之外,我还想实现如下功能:对于那些已经注册GitHub.com的用户,只要该用户许可,"云冲印"网站就能从GitHub.com那里获得该用户的登录名、头像等公开信息,免得这类用户多次注册。作为"云冲印"网站的管理员,我该如何做呢?

按照阮老师博客里的提示,可以"云冲印"网站管理员的身份到https://github.com/settings/applications/new注册信息,见下图:
在这里插入图片描述
注册成功后,可以在GitHub页面上看到如下信息:

Client ID
xxxxxxxxxxxxxxxxxxxx
Client Secret
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

这里的Client ID可以公开,可以让地球人都知道。Client Secret要保存在"云冲印"网站服务端代码里或数据库里,不要让任何人知道,而且这个值可能要定期更新。

阮老师demo代码里,index.js其实是"云冲印"网站服务端代码,内有Client Secret信息,是不能公开的。

我把整个交互过程整理成不严格的UML时序图如下:
在这里插入图片描述

时序图中的各个URL地址如下:

地址1
https://github.com/login/oauth/authorize?client_id=xxx&redirect_uri=http://localhost:8080/oauth/redirect

地址2
https://github.com/login?client_id=xxx&return_to=%2Flogin%2Foauth%2Fauthorize%3Fclient_id%3Dxxx%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A8080%252Foauth%252Fredirect

地址3
https://github.com/login/oauth/authorize?client_id=xxx&redirect_uri=http://localhost:8080/oauth/redirect
这里的client_id是“云冲印”网站管理员在GitHub.com申请的,和用户无关

地址4
http://localhost:8080/oauth/redirect?code=zzz

地址5
https://github.com/login/oauth/access_token?client_id=xxx&client_secret=yyy&code=zzz
其中headers为:
accept: application/json
注意:由于是安全的HTTPS协议,client_secret的值是密文。

地址6
https://api.github.com/user
其中headers:
accept: application/json
Authorization: token YOUR_ACCESS_TOKEN

注意:地址6中headers的Authorization值就是token空格加GitHub.com返回的一串字符,这是相关规范要求的。类似的,JWT相关规范中,头信息格式为:Authorization: Bearer 。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将 GitHub 第三方登录接入到你的应用程序中,你可以按照以下步骤进行操作: 1. 创建一个 GitHub 开发者帐户:在 GitHub 上创建一个帐户(如果你还没有)。然后登录到你的帐户并导航到开发者设置页面。 2. 创建一个新的 OAuth 应用程序:在开发者设置页面中,点击 "New OAuth App" 按钮创建一个新的应用程序。填写应用程序的名称、主页 URL(可以是你的应用程序网站)、回调 URL(GitHub 会将用户重定向到此 URL),并选择适当的权限范围。 3. 获取应用程序的客户端 ID 和客户端密钥:创建应用程序后,你将获得一个客户端 ID 和一个客户端密钥。这些信息将在后步骤中使用。 4. 在你的应用程序中实现登录功能:根据你所使用的编程语言和框架,找到适当的库或插件来帮助你实现 GitHub 第三方登录功能。不同语言和框架可能有不同的实现方式,你可以参考 GitHub 的官方文档或搜索相关示例代码。 5. 配置登录回调处理:当用户使用 GitHub 登录成功后,GitHub 会将用户重定向到你在步骤 2 中设置的回调 URL。在你的应用程序中,需要处理这个回调请求,并从中提取授权码或访问令牌。使用这些令牌,你可以与 GitHub API 进行交互,获取用户的信息或执行其他操作。 6. 使用 GitHub API:一旦用户成功登录并授权你的应用程序,你可以使用 GitHub API 访问用户的存储库、个人信息等。根据你的需求,调用适当的 API 端点来获取所需的数据。 这些步骤涵盖了一个基本的 GitHub 第三方登录接入流程。具体实现方式可能因你所使用的编程语言和框架而有所不同,但上述步骤应该能够帮助你开始进行接入。记得在实际开发过程中查阅相关文档和示例代码,以确保正确地实现登录功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值