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

  • Post author:
  • Post category: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等



版权声明:本文为liyh722原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。