使用github实现第三方登录

本例以github为例

先去github申请

这时候你会拿到这两个参数

前端准备

   一键登录

    login() {
      alert('click')
      const authorize_uri = 'https://github.com/login/oauth/authorize'
      const client_id = 'a29c48c1e7c4f774c6c9'
      const redirect_uri = 'http://localhost:8080/login/oauth2/code/github'
      window.location.href = `${authorize_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}`
    }

后端准备

项目结构

spring:
  security:
    oauth2:
      client:
        registration:
          github:
            clientId: a29c**************填自己的******774c6c9
            clientSecret: b610b184************填自己的******d75f143297
  thymeleaf:
    check-template-location: true
    enabled: true
    encoding: utf-8
    mode: HTML5
    prefix: classpath:/templates/
    suffix: .html
    template-resolver-order:
server:
  port:8080

package com.soft1851.spring.boot.oauth.controller;

import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @Description TODO
 * @Author 涛涛
 * @Date 2020/4/29 10:58
 * @Version 1.0
 **/
@RestController
public class TestController {
    @RequestMapping("/index")
    public String simpleIndex() {
        return "index";
    }
}

package com.soft1851.spring.boot.oauth;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootOauthApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringBootOauthApplication.class, args);
    }
}

hello

    
            org.springframework.boot
            spring-boot-starter-oauth2-client
        

        
        
            org.thymeleaf
            thymeleaf-spring5
            3.0.11.RELEASE
        

后端运行起来
前端启动
这个时候就开始打卡 F12

遇到这个，就清空浏览器缓存，建议用插件 Click and Clean
重试 向这样的长时间刷新的页面，别跟我客气，点击这个X，再重新刷新就好，当然你有耐心等就更好，全程不要关F12

第一次的时候应该进授权页面，同意后就跳到这里，就不马赛克了，除了小姐姐不许加我QQ

点击登录后
也许会跳到这里
也许会跳到自己写的页面，当然这不重要，数据拿到了。

开开心心的打开Postman
红色那个有毛病，不用，用下面的蓝色的

模拟第三方登录

第一步简单点，一个参数，header也不许要给值

第一步返回的结果，就是模拟返回的 code，

去之前的地方把code复制过来
第二步用到
地址栏的框外内容就不用写了，就是下面的参数，写到 ？ 就可以了，，算了我复制吧
https://github.com/login/oauth/access_token
注意那个Authrization


弄成这样

再次请求

会返回一个token,复制这一段

第三步：



大概就是这样
运行后结果就是这样，就代表第三方登录成功

可能会报错




。。。
多于的都关了
再不成功，就是code或者token过期了，整个流程不要太慢，十分钟内完成。
点个赞啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊