如何进行 Github 第三方登录详细讲解 （Java 版本）

news2025/1/12 6:20:01

如何进行 Github 第三方登录详细讲解 （Java 版本）

文章目录

  • 如何进行 Github 第三方登录详细讲解 （Java 版本）
    • 创建一个 Github 应用
    • 定义一个跳转按钮，进行 Github 的授权
    • 通过授权拿到一个随机的 code
    • 通过 code 进行后端回调处理，拿到access_token
    • 拿到授权信息以后可以进行获取用户的信息
    • 拿到的用户信息与数据库进行比对进行登录验证（思路）

创建一个 Github 应用

  1. 点击 Github 的头像

  2. 然后点击设置在这里插入图片描述

  3. 进入设置后，往下滑，点击开发者设置在这里插入图片描述

  4. 然后点击 Oauth apps在这里插入图片描述

  5. 随后创建一个新的OAuth App 在这里插入图片描述

  6. 可以看到的是期中有几个必填选项，下面我们来一一说明在这里插入图片描述

    1. Application name 这个可以随意填写，就是你的一个应用名字而已
    2. Homepage URL 填写你自己的前端页面的首页就好了
    3. Application description 这个就是一个描述，随意填写就好了
    4. Authorization callback URL 这个就是授权了以后进行身份判断的回调地址，用于自己对第三方信息进行获取，处理，鉴权。比较重要
    5. 下面是一个填写示例：在这里插入图片描述

  7. 全部填写好后我们成功创建了一个 Github 授权应用。

  8. 这里需要我们进行几个关键信息的记录，一个是 client_id 这个不会变，一个是 client_secret （注意，这个只能查看一次请妥善保管），这些信息我们后面需要用。

定义一个跳转按钮，进行 Github 的授权

首先在前端页面中定义一个跳转到 Github 授权页面的链接，示例如下：

<a href="https://github.com/login/oauth/authorize?scope=user:email&client_id=请填写自己的client_id">Github登录</a>

这里可以自己随意快速的开一个前端应用，然后加一个链接标签，把 href 属性的值如上就可以了，只需要注意的是其中的 client_id 需要换成自己的就行，创建好以后，前后端分离的那么前端几乎就没有事情需要做了。这里主要是前后端分离版本。

在这里插入图片描述

通过授权拿到一个随机的 code

点击上面的 Github 登录以后会出现一个这样的页面

在这里插入图片描述

点击绿色的按钮就会进行用户的授权，点击后就会重定向到我们上面那个写的回调地址。
在这里插入图片描述

在这里插入图片描述

通过在创建的应用的时候写的回调 URL 进行后端的处理，用户在点击授权以后，页面会重定向进行一个 Get 请求，后端去接收这个请求，并且进行处理就可以了，重定向的时候，会传递一个参数 code ，这个 code 可以用于获取 access_token , 获取到 token 以后用于获取 用户的信息。

接口示例：

public class ThirdLoginController {
    @GetMapping("/callback")
    public void getCode(String code){
        System.out.println(code);

debug 拿值示例
在这里插入图片描述

这一部分只是为了我能够拿到 code 的值，我们一步一步来，看下面 👇

通过 code 进行后端回调处理，拿到access_token

这里我是通过阅读官方文档进行一点一点测试的，官方的文档的语言并不是 Java 这里给出官方文档和我的写法

我的写法(这里发起 Http 请求使用的是 Hutool 工具包)

Map<String, Object > paramMap = new HashMap<>();
paramMap.put("client_id","填写自己的client_id");
paramMap.put("client_secret","填写自己的secret");
paramMap.put("code",code);
paramMap.put("accept","json");
String result = HttpUtil.post("https://github.com/login/oauth/access_token",paramMap);

拿到的结果(类似👇)：

access_token=gho_lK2Eop11rUH9U7aDTcxUrdORdTPAIS2vVDbh&scope=user%3Aemail&token_type=bearer

官方参考

get '/callback' do
  # get temporary GitHub code...
  session_code = request.env['rack.request.query_hash']['code']

  # ... and POST it back to GitHub
  result = RestClient.post('https://github.com/login/oauth/access_token',
                          {:client_id => CLIENT_ID,
                           :client_secret => CLIENT_SECRET,
                           :code => session_code},
                           :accept => :json)

  # extract the token and granted scopes
  access_token = JSON.parse(result)['access_token']
end

拿到授权信息以后可以进行获取用户的信息

拿到 token 信息以后，我们要对信息进行处理，从中提取出 access_token 的值，然后就是发起请求获取用户信息了，这里获取用户信息，也是参考官方文档的，后面一直授权不能通过，通过问 AI 解决了问题。

我的示例代码：

// 处理拿到的信息
String token = result.split("&")[0].split("=")[1];
        // 获取用户信息，发起get 请求，拿到用户信息
        String finalResult = HttpRequest.get("https://api.github.com/user")
                .header("Authorization","token "+token)
                .header("X-GitHub-Api-Version", "2022-11-28")
                .execute().body();

代码中我出问题的地方在 header 的设置，也就是不知道我获取的 token 怎么传给 github 官方，好像参考的里面说的也不是很明白，后面看了，github 官方关于 授权的文档是要加上两个请求头才能够正常进行请求Authorization(这里需要注意的是，token 值得书写，必须是 token后面空格，写access_token的值) X-GitHub-Api-Version 这个的话就是只需要带上 API 版本的值就好了。

信息结果示例：

{
  "login": "xwhking",
  "id": 97931879,
  "node_id": "U_kgDOBdZSZw",
  "avatar_url": "https://avatars.githubusercontent.com/u/97931879?v=4",
  "gravatar_id": "",
  "url": "https://api.github.com/users/xwhking",
  "html_url": "https://github.com/xwhking",
  "followers_url": "https://api.github.com/users/xwhking/followers",
  "following_url": "https://api.github.com/users/xwhking/following{/other_user}",
  "gists_url": "https://api.github.com/users/xwhking/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/xwhking/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/xwhking/subscriptions",
  "organizations_url": "https://api.github.com/users/xwhking/orgs",
  "repos_url": "https://api.github.com/users/xwhking/repos",
  "events_url": "https://api.github.com/users/xwhking/events{/privacy}",
  "received_events_url": "https://api.github.com/users/xwhking/received_events",
  "type": "User",
  "site_admin": false,
  "name": "xwhking",
  "company": null,
  "blog": "",
  "location": null,
  "email": null,
  "hireable": null,
  "bio": null,
  "twitter_username": null,
  "public_repos": 8,
  "public_gists": 0,
  "followers": 1,
  "following": 2,
  "created_at": "2022-01-18T04:06:06Z",
  "updated_at": "2024-02-20T02:27:32Z"
}

从中我们可以获取一些最为直观的信息，比如 name（github用户名），avatar_url （头像地址），html_url（用户的 github 主页）等。

还可以以同样的方式获取用户的邮箱，只是请求的url 变化一下而且，就是请求 url 变成 https://api.github.com/user/emails

请求邮箱结果如下：

[
    {
        "email": "2837468248@qq.com",
        "primary": true,
        "verified": true,
        "visibility": "private"
    },
    {
        "email": "97931879+xwhking@users.noreply.github.com",
        "primary": false,
        "verified": true,
        "visibility": null
    }
]

从中可以获取邮箱信息，通过判断 primary 字段判断是否为私有邮箱。

参考官方文档：

# fetch user information
auth_result = JSON.parse(RestClient.get('https://api.github.com/user',
                                        {:params => {:access_token => access_token}}))

# if the user authorized it, fetch private emails
if has_user_email_scope
  auth_result['private_emails'] =
    JSON.parse(RestClient.get('https://api.github.com/user/emails',
                              {:params => {:access_token => access_token}}))
end

erb :basic, :locals => auth_result

整体的一个后端代码示例：

@RestController
@RequestMapping("/third_login")
public class ThirdLoginController {
    @GetMapping("/callback")
    public void getCode(String code){
        System.out.println(code);
        Map<String, Object > paramMap = new HashMap<>();
        paramMap.put("client_id","XXX");
        paramMap.put("client_secret","XXX");
        paramMap.put("code",code);
        paramMap.put("accept","json");
        String result = HttpUtil.post("https://github.com/login/oauth/access_token",paramMap);
        String token = result.split("&")[0].split("=")[1];
        // 获取用户信息
        String finalResult = HttpRequest.get("https://api.github.com/user")
                .header("Authorization","token "+token)
                .header("X-GitHub-Api-Version", "2022-11-28")
                .execute().body();
        System.out.println(finalResult);

    }
}

拿到的用户信息与数据库进行比对进行登录验证（思路）

我们都拿到 Github 上用户的信息了，那么只需要把拿到的信息放入我们自己的数据库，那么是不是就可以让用户进行登录了呀！

比如我们可以记录用户的，id，用户名，邮箱，如果用户是第一次登录，就新创建一条记录，如果不是就进行数据库数据的比对进行登录，如果有错误，不让登录就好。没有错误就把页面重定向到对应的前端页面，并且把用户信息返回给前端。这样应该就算是第三方登录了吧！

大家好，我是xwhking，一名技术爱好者，目前正在全力学习 Java，前端也会一点，如果你有任何疑问请你评论，或者可以加我QQ（或者QQ邮箱，我看见就一定会回复的）（2837468248）说明来意！希望能够与你共同进步

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1459616.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【MySQL】Navicat/SQLyog连接Ubuntu中的数据库（MySQL）

【MySQL】Navicat/SQLyog连接Ubuntu中的数据库（MySQL）

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、安装…
阅读更多...
消息队列-RabbitMQ：发布确认—发布确认逻辑和发布确认的策略

消息队列-RabbitMQ：发布确认—发布确认逻辑和发布确认的策略

九、发布确认 1、发布确认逻辑 生产者将信道设置成 confirm 模式&#xff0c;一旦信道进入 confirm 模式&#xff0c;所有在该信道上面发布的消息都将会被指派一个唯一的 ID (从 1 开始)&#xff0c;一旦消息被投递到所有匹配的队列之后&#xff0c;broker 就会发送一个确认给…
阅读更多...
Input Output模型

Input Output模型

一、I/O介绍 I/O在计算机中指Input/Output&#xff0c; IOPS (Input/Output Per Second)即每秒的输入输出量(或读写次数)&#xff0c;是衡量磁盘性能的主要指标之一。IOPS是指单位时间内系统能处理的I/O请求数量&#xff0c;一般以每秒处理的I/O请求数量为单位&#xff0c;I/O…
阅读更多...
ETL、ELT区别以及如何正确运用

ETL、ELT区别以及如何正确运用

一、 浅谈ETL、ELT ETL与ELT的概念 ETL (Extract, Transform, Load) 是一种数据集成过程&#xff0c;通常用于将数据从一个或多个源系统抽取出来&#xff0c;经过清洗、转换等处理后&#xff0c;加载到目标数据存储中。这种方法适用于需要对数据进行加工和整合后再加载到目标…
阅读更多...
react实现转盘抽奖功能

react实现转盘抽奖功能

看这个文章不错&#xff0c;借鉴 这个博主 的内容 样式是背景图片直接&#xff0c;没有设置。需要的话应该是 #bg { width: 650px; height: 600px; margin: 0 auto; background: url(turntable-bg.jpg) no-repeat; position: relative; } img[src^"pointer"] {positi…
阅读更多...
redis的搭建 RabbitMq搭建

redis的搭建 RabbitMq搭建

官网 Download | Redis wget https://github.com/redis/redis/archive/7.2.4.tar.gz 编译安装 yum install gcc g tar -zxvf redis-7.2.4.tar.gz -C /usr/localcd /usr/local/redis make && make install 常见报错 zmalloc.h:50:10: fatal error: jemalloc/jemal…
阅读更多...
[office] excel图表怎么发挥IF函数的威力 #微信#媒体

[office] excel图表怎么发挥IF函数的威力 #微信#媒体

excel图表怎么发挥IF函数的威力 IF函数应该是最常用的Excel函数之一了&#xff0c;在公式中经常能够看到她的“身影”。IF函数的基本使用如图1所示。 图1 IF函数之美 IF函数是一个逻辑函数&#xff0c;通过判断提供相应操作&#xff0c;让Excel更具智能。 然而&#xff0c;…
阅读更多...
js设计模式:装饰者模式

js设计模式:装饰者模式

作用: 可以给原有对象的身上添加新的属性方法 可以让对象或者组件进行扩展 示例: class Person{constructor(name,selfSkill){this.name namethis.selfSkill selfSkill}run 会走路}//所有人类都有的共同特性和技能let wjt new Person(王惊涛,写代码)let mashi new Pers…
阅读更多...
2024.02.20作业

2024.02.20作业

1. 使用多进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;父进程回收子进程的资源 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <errno.h> #include <time.h> #includ…
阅读更多...
Sora的原理，中国小学生游戏在践行

Sora的原理，中国小学生游戏在践行

大家龙年好呀&#xff0c;春节假期和家人出去浪了&#xff0c;旅行期间&#xff0c;几乎没刷社交媒体信息。等我17号回到家仔细看手机&#xff0c;Sora的消息铺面而来&#xff0c;什么“新革命”、“划时代”、“新纪元”说的挺神呼。 任何新事物出现&#xff0c;讨论热烈是好…
阅读更多...
AS-V1000 视频监控平台产品介绍：客户端功能介绍（四）

AS-V1000 视频监控平台产品介绍：客户端功能介绍（四）

目 录 一、引言 1.1 AS-V1000视频监控平台介绍 1.2平台服务器配置说明 二、软件概述 2.1 客户端软件用途 2.2 客户端功能 三、客户端功能说明 3.1告警管理 3.1.1告警联动 &#xff08;1&#xff09;告警联动显示 &#xff08;2&#xff09;告警联动处理 3…
阅读更多...
unity学习（31）——跳转到角色选择界面（打勾？手滑挂错脚本）

unity学习（31）——跳转到角色选择界面（打勾？手滑挂错脚本）

There are 2 audio listeners in the scene. Please ensure there is always exactly one audio listener in the scene. 是因为后来创建了一个camera&#xff0c;因为camera中自带一个组件Audio Listener。所以有两个camera就有两个audio listener导致报错。 一个简单的解决…
阅读更多...
C++（18）——适配器概念以及stack、queue、优先队列的模拟实现

C++（18）——适配器概念以及stack、queue、优先队列的模拟实现

上篇文章中&#xff0c;给出了对于模拟实现中功能的补全&#xff0c;本篇文章将优先介绍一个新的容器之后引入什么是适配器&#xff0c;以及适配器的使用方法&#xff0c;再通过适配器的思想来完成对于&#xff0c;、优先级队列_的实现。 目录 1. deque: 1.1 什么是deque&…
阅读更多...
【嵌入式-Keil】keil代码提示快捷键

【嵌入式-Keil】keil代码提示快捷键

CTRL空格 如果没有提示&#xff0c;可能跟输入法的快捷键冲突&#xff0c; 右键->设置->按键->勾掉第一个就行了 再按CTRL空格就有提示了 参考&#xff1a;串口发送&串口发送接收
阅读更多...
SAP PP学习笔记02 - PP中配置品目Master时的顺序

SAP PP学习笔记02 - PP中配置品目Master时的顺序

配置品目Master的时候&#xff0c;最佳实践是要遵循什么顺序呢&#xff1f; 一般而言是如下顺序 - 新规物料类型&#xff08;或利用现有类型也可以&#xff09; - 设定料号范围 - 设定物料状态&#xff08;比如准备好之前&#xff0c;要先锁住&#xff0c;等准备好了之后再…
阅读更多...
CTFshow web(SQL注入176-179）

CTFshow web(SQL注入176-179）

web176 没啥好说的&#xff0c;直接上万能密码&#xff1a; 1 or usernameflag 当然了还有别的方法&#xff1a; 1 union Select 1,2,group_concat(password) from ctfshow_user where username flag -- web177 没啥好说的&#xff0c;直接上万能密码&#xff1a; 1 or user…
阅读更多...
《VitePress 简易速速上手小册》第1章：VitePress 入门（2024 最新版）

《VitePress 简易速速上手小册》第1章：VitePress 入门（2024 最新版）

文章目录 1.1 VitePress 简介与架构1.1.1 基础知识点解析1.1.2 重点案例&#xff1a;企业文档站点1.1.3 拓展案例 1&#xff1a;个人博客1.1.4 拓展案例 2&#xff1a;产品展示网站 1.2 安装与初次运行1.2.1 基础知识点解析1.2.2 重点案例&#xff1a;公司内部知识分享平台1.2.…
阅读更多...
关于VIT（Vision Transformer）的架构记录

关于VIT（Vision Transformer）的架构记录

在VIT模型设计中&#xff0c;尽可能地紧密遵循原始的Transformer模型&#xff08;Vaswani等人&#xff0c;2017年&#xff09;。这种刻意简化的设置的一个优势是&#xff0c;可扩展的NLP Transformer架构及其高效的实现几乎可以即插即用。 图&#xff1a;模型概述。我们将图像分…
阅读更多...
MySQL在OpenEuler中的安装及数据库的备份

MySQL在OpenEuler中的安装及数据库的备份

MySQL在OpenEuler中的安装 MySQL以二进制形式进行安装 1.获取软件包 &#xff08;在进行获取时&#xff0c;检查网络是否通畅&#xff09; wget -c https://mirrors.aliyun.com/mysql/MySQL-8.0/mysql-8.0.28-linux-glibc2.12-x86_64.tar.xz2.创建用户组和用户 groupadd -g…
阅读更多...
图片怎么变成透明背景？分享这些变透明的方法

图片怎么变成透明背景？分享这些变透明的方法

很多从事编辑和图片设计的同行在日常工作中经常需要处理图片的背景色。为了更好地进行设计和编辑&#xff0c;将图片的背景色替换成透明是非常必要的。然而&#xff0c;对于一些新手来说&#xff0c;使用专业的图像处理软件可能有些困难。不过&#xff0c;现在有很多在线的图像…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023