vue3 axios 登录功能

1. 准备工作_OAuth2（官网地址：开发流程）

1.1 授权应用程序用户的 web 应用程序流程是

  1. 用户被重定向，以请求他们的 GitHub 身份

  2. 用户被 GitHub 重定向回您的站点

  3. 您的应用程序使用用户的访问令牌访问 API

1.2 OAuth2 认证基本流程

2. 放置“GitHub登录”按钮

本步骤的作用：

　　在网站页面上放置“GitHub登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出GitHub登录对话框 。

2.1 下载“GitHub登录”按钮图片，并将按钮放置在页面合适的位置

　　可以到阿里矢量图库下载更多图标：阿里巴巴矢量图标库

2.2 把“GitHub登录”按钮添加到页面

2.2.1 效果演示

2.2.2 前端代码(Vue)

GitHub登录”按钮图片添加如下前台代码：

<div style="line-height: 22px;margin:0 0 8px 0;color: #9b9b9b;">
        <span style="vertical-align:middle">第三方登录:</span>
        <img :src="qqIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="QQ">
        <img :src="baiduIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="百度">
        <img :src="weiboIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="微博">
        <img :src="zhifubaoIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="支付宝">
        <img :src="giteeIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="Gitee">
        <img :src="githubIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="GitHub">
</div>

2.2.2 后端代码(Java)

1. GitHub登录配置文件信息：

# GitHub登录配置
github.appID = 26666666666666662（替换自己的）
github.appKEY = 666666666666666666666666666664（替换自己的）
github.redirectURI = https://www.youyoushop.work/gitHubCallback（替换自己的）
github.authorizeURL = https://github.com/login/oauth/authorize
github.accessToken = https://github.com/login/oauth/access_token
github.userInfo = https://api.github.com/user

2. 读取配置文件信息常量类：

package com.liyh.constants;

import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;

/**
 * GitHub登陆常量配置类
 *
 * @author Liyh
 */
@Data
@Configuration
@PropertySource("classpath:config.properties")
public class GitHubConstants {

    @Value("${github.appID}")
    private String appID;

    @Value("${github.appKEY}")
    private String appKEY;

    @Value("${github.redirectURI}")
    private String redirectURI;

    @Value("${github.authorizeURL}")
    private String authorizeURL;

    @Value("${github.accessToken}")
    private String accessToken;

    @Value("${github.userInfo}")
    private String userInfo;

}

3. Conteoller（获取Gitee登录的url）

/**
     * 获得跳转到GitHub登录页的url,前台直接a连接访问
     *
     * @return
     * @throws Exception
     */
    @GetMapping("/getGitHubCode")
    public Result getGitHubCode() {
        // 授权地址 ,进行Encode转码
        String authorizeURL = gitHubConstants.getAuthorizeURL();

        // 回调地址 ,回调地址要进行Encode转码
        String redirectUri = gitHubConstants.getRedirectURI();

        //用于第三方应用防止CSRF攻击
        String uuid = UUID.randomUUID().toString().replaceAll("-", "");

        // https://github.com/login/oauth/authorize
        // ?client_id=appid
        // &redirect_uri=redirectUri
        // &state=afasd

        // 拼接url
        StringBuilder url = new StringBuilder();
        url.append(authorizeURL);
        url.append("?client_id=" + gitHubConstants.getAppID());
        // 转码
        url.append("&redirect_uri=" + URLEncodeUtil.getURLEncoderString(redirectUri));
        url.append("&state=" + uuid);

        return Result.success("操作成功", url);
    }

3. 获取AccessToken

3.1 获取Authorization Code

请求地址：

https://github.com/login/oauth/authorize

请求方法：

　　GET

请求参数：

名称	类型	是否必填	说明
client_id	string	是	“必需”。 注册时从 GitHub 收到的客户端 ID。
redirect_uri	string	是	用户获得授权后被发送到的应用程序中的 URL。 请参阅以下有关重定向 URL
state	string	是	不可猜测的随机字符串。 它用于防止跨站请求伪造攻击。

返回说明：

1. 如果用户成功登录并授权，则会跳转到指定的回调地址，并在redirect_uri地址后带上Authorization Code和原始的state值。如：

https://www.youyoushop.work/gitHubCallback?code=1E8312312324D9B3C&state=cca3c1512312312323fe

2. 如果用户在登录授权过程中取消登录流程，对于PC网站，登录页面直接关闭。

3.2 通过Authorization Code获取Access Token

如果用户接受你的请求，GitHub 会使用代码参数中的临时 code 以及你在上一步的 state 参数中提供的状态重定向回你的站点。

临时代码将在 10 分钟后到期。 如果状态不匹配，然后第三方创建了请求，您应该中止此过程。

请求地址：

POST https://github.com/login/oauth/access_token

请求方法：

　　POST

请求参数：

名称	类型	是否必填	说明
client_id	string	是	从 GitHub 收到的 OAuth App 的客户端 ID。
client_secret	string	是	从 GitHub 收到的 OAuth App 的客户端码。
code	string	是	收到的作为对步骤 1 的响应的代码。
redirect_uri	string	否	用户获得授权后被发送到的应用程序中URL。

返回说明：

　　如果成功返回，即可在返回包中获取到Access Token。 

access_token=gho_16C7e42F292c6912E7710c838347Ae178B4a&scope=repo%2Cgist&token_type=bearer

故障排除

排查授权请求错误”

排查 OAuth 应用访问令牌请求错误”

设备流错误”

令牌过期和吊销”

4. 获取用户信息

请求地址：

https://api.github.com/user?access_token=xxx

请求方法：

　　GET

请求参数：

参数	是否必须	含义
access_token	必须	在Step1中获取到的access token。

5. 测试网站（地址），需要的小伙伴可以测试

5.1 每个人做的项目需求不同，可能会出现不同的问题，文章仅供参考

5.2 SpringBoot+Vue实现第三方GitHub登录(一)

5.3 其他第三方登录方式：第三方登录汇总

6. 源码购买

6.1 简洁版源码（淘宝店铺：爱创客网络）

只包含登录，第三方登录，跳转首页（没有菜单！），技术框架：SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等

6.2 完整版本源码（淘宝店铺：爱创客网络）

测试地址(测试地址是完整版的)：www.youyoushop.work

包含登录，注册，第三方登录，完整的系统管理模块，系统工具模块，系统监控模块，系统日志模块，个人中心等，技术框架：SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等