SpringBoot+Vue实现第三方支付宝登录(二)

1. 支付宝登录授权流程

网站支付宝登录的授权流程遵照 OAuth2.0 协议，具体请见下图。其中，申请获取用户信息功能时默认可获取的用户信息包含支付宝用户 ID、昵称、性别、省份、城市、用户头像信息。

  1. 首先，按照规则拼接授权页面的链接引导用户登录并授权给商家；

  2. 用户授权后，开放平台会将用户浏览器重定向到商家设置的 returnUrl（该 URL 需与商家在开放平台设置的授权回调地址保持一致），同时会带上 auth_code 参数；

  3. 商家在获取 auth_code 后，调用开放平台接口 alipay.system.oauth.token（换取授权访问令牌接口），使用 auth_code 换取授权访问令牌 access_token；

  4. 此时，商家就可以拿着 access_token，通过商户后台发起对开放平台 alipay.user.info.share（支付宝会员授权信息查询接口）的调用，获取用户授权的信息。

本步骤的作用：

　　登录 开放平台控制台 获取创建应用的 APPID

　　接入支付宝登录前，网站需首先进行申请，获得对应的appid，以保证后续流程中可正确对网站与用户进行验证与授权。

注意：对appid和appkey信息进行保密，不要随意泄漏。

2. 放置“支付宝登录”按钮

本步骤的作用：

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

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

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

2.2 把“支付宝登录”按钮添加到页面

2.2.1 效果演示

2.2.2 前端代码(Vue)

　　为了实现上述效果，应该为“支付宝登录”按钮图片添加如下前台登录页面代码：

<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.3 后端代码(Java)

1. 支付宝登录配置文件信息：

# 支付宝登录配置
zhifubao.appID = 66666666 （ 替换成你的 ）
zhifubao.redirectURI = https://www.youyoushop.work/zhiFuBaoCallback （ 替换成你的 ）
zhifubao.authorizeURL = https://openauth.alipay.com/oauth2/publicAppAuthorize.htm
zhifubao.gateway = https://openapi.alipay.com/gateway.do
zhifubao.appPrivateKey = MIIujfisdfasdf33232ufsdf0d8fsad （ 替换成你的私钥 ）
zhifubao.alipayPublicKey = MIIBIjANBgkqhkiG9w0BAQEFfffffffasdfasdfaer3fsadfbovsgdTUqaUKhF （ 替换成你的公钥 ）

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;

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

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

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

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

    @Value("${zhifubao.gateway}")
    private String gateway;

    @Value("${zhifubao.appPrivateKey}")
    private String appPrivateKey;

    @Value("${zhifubao.alipayPublicKey}")
    private String alipayPublicKey;

}

3. Conteoller（获取支付宝登录的url）

@ApiOperation("获得跳转到支付宝登录页的url")
@GetMapping("/getZhiFuBaoCode")
public ResponseEntity<Object> getZhiFuBaoCode() throws Exception {
    // 授权地址 ,进行Encode转码
    String authorizeURL = zhiFuBaoConstants.getAuthorizeURL();

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

    //用于第三方应用防止CSRF攻击
    String uuid = UUID.randomUUID().toString().replaceAll("-", "");
    // 保存到Redis
    redisUtils.set(ZHIFUBAOSTATE + "-" + uuid, uuid, expiration, TimeUnit.MINUTES);

    // https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?
    // app_id=appid
    // &scope=auth_user
    // &redirect_uri=redirectUri
    // &state=init

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

    return ResponseEntity.ok(url);
}

3. 使用Authorization_Code获取Access_Token（官方文档：地址）

本步骤的作用：

　　通过用户验证登录和授权，获取Access Token，为下一步获取用户的OpenID做准备。

　　同时，Access Token是应用在调用OpenAPI访问和修改用户数据时必须传入的参数。

3.1 简介

　　适用于需要从web server访问的应用，例如Web网站。

对于应用而言，需要进行两步：

　　1. 获取Authorization Code。

　　2. 通过Authorization Code获取Access Token。

3.2 获取Authorization Code

示例代码

https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?
app_id=66666
&scope=auth_user
&redirect_uri=redirectUri
&state=asdfsdf

请求参数：

参数	是否必须	含义
app_id	必须	开发者应用的app_id，相同支付宝账号下，不同的app_id获取的token切忌混用。
scope	必须	接口权限值，目前只支持auth_user（获取用户信息、网站支付宝登录）、auth_base（用户信息授权）、auth_ecard（商户会员卡）、auth_invoice_info（支付宝闪电开票）、auth_puc_charge（生活缴费）五个值;多个scope时用”,”分隔，如scope为”auth_user,auth_ecard”时，此时获取到的access_token，可以用来获取用户信息
redirect_uri	必须	授权回调地址，是经过URLENCODE转义 的url链接（url必须以http或者https开头）； 在请求之前，开发者需要先到开发者中心对应应用内，配置授权回调地址。 redirect_uri与应用配置的授权回调地址域名部分必须一致。
state	否	自定义参数，用户授权后，重定向到redirect_uri时会原样回传给商户。 为防止CSRF攻击，建议开发者请求授权时传入state参数，该参数要做到既不可预测，又可以证明客户端和当前第三方网站的登录认证状态存在

返回说明：

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

http://example.com/doc/toAuthPage.html?app_id=2014101500013658&source=alipay_wallet&scope=auth_user&auth_code=ca34ea491e7146cc87d25fca24c4cD11

注意：此code会在10分钟内过期。

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

错误码说明：

　　接口调用有错误时，会返回code和msg字段，以url参数对的形式返回，value部分会进行url编码（UTF-8）。

　　PC网站接入时，错误码详细信息请参见：PC网站接入时的公共返回码

3.3 通过Authorization Code获取Access Token

请求说明：

　　支付宝登录和qq等第三方登录方式不一样，需要使用支付宝的依赖

<!--支付宝依赖-->
<dependency>
    <groupId>com.alipay.sdk</groupId>
    <artifactId>alipay-sdk-java</artifactId>
    <version>3.1.0</version>
</dependency>

请求参数：

AlipayClient alipayClient = new DefaultAlipayClient("https://openapi.alipay.com/gateway.do","app_id","your private_key","json","GBK","alipay_public_key","RSA2");

接口实例代码：

AlipayClient alipayClient = new DefaultAlipayClient("https://openapi.alipay.com/gateway.do", APP_ID, APP_PRIVATE_KEY, "json", CHARSET, ALIPAY_PUBLIC_KEY, "RSA2"); 
AlipaySystemOauthTokenRequest request = new AlipaySystemOauthTokenRequest();
request.setCode("2e4248c2f50b4653bf18ecee3466UC18");
request.setGrantType("authorization_code");
try {
    AlipaySystemOauthTokenResponse oauthTokenResponse = alipayClient.execute(request);
    System.out.println(oauthTokenResponse.getAccessToken());
} catch (AlipayApiException e) {
    //处理异常
    e.printStackTrace();
}

4. 通过Access Token 获取用户信息

本步骤的作用：

　　通过输入在上一步获取的Access Token，得到对应用户的信息。

请求参数：

AlipayClient alipayClient = new DefaultAlipayClient(zhiFuBaoConstants.getGateway(), zhiFuBaoConstants.getAppID(), zhiFuBaoConstants.getAppPrivateKey(), "json", "GBK", zhiFuBaoConstants.getAlipayPublicKey(), "RSA2");

接口实例代码：

AlipayClient alipayClient = new DefaultAlipayClient(
        "https://openapi.alipay.com/gateway.do", APP_ID, APP_PRIVATE_KEY, "json", "GBK",
        ALIPAY_PUBLIC_KEY);
    AlipayUserInfoShareRequest request = new AlipayUserInfoShareRequest();
    String token =/* 获取步骤3中的token */;
    AlipayUserInfoShareResponse response = alipayClient.execute(request, token);
    if (response.isSuccess()) {
        System.out.println("调用成功");
        System.out.println(ReflectionToStringBuilder.toString(response));
        String userId = response.getUserId();
    } else {
        System.out.println("调用失败");
        System.out.println(response.getSubCode() + ":" + response.getSubMsg());
    }

返回数据：

{
　　"alipay_user_info_share_response": {
　　　　"code": "10000",
　　　　"msg": "Success",
　　　　"user_id": "2088102104794936",
　　　　"avatar": "http://tfsimg.alipay.com/images/partner/T1uIxXXbpXXXXXXXX",
　　　　"province": "安徽省",
　　　　"city": "安庆",
　　　　"nick_name": "支付宝小二",
　　　　"gender": "F"
    },
　　"sign": "ERITJKEIJKJHKKKKKKKHJEREEEEEEEEEEE"
}

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

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

5.2 SpringBoot+Vue实现第三方支付宝登录(一)

5.3 其他第三方登录方式：https://www.cnblogs.com/liyhbk/category/2089783.html

6. 源码购买

6.1 简洁版（淘宝源码）

包含登录，第三方登录，跳转首页，SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等

6.2 多功能版本（淘宝源码）

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