小程序登录之支付宝授权的实现示例


Posted in Javascript onDecember 13, 2019

众所周知,微信小程序是可以通过微信本身授权后再登录,平台可以拿到微信用的的账号相关信息,然后保存到数据库中,那么同理在支付宝小程序开发过程中,登录功能的设计也可以如此

小程序登录之支付宝授权的实现示例

上图是官方提供的时序图,具体看一下流程:

在小程序端获取 auth_code,目的是获取用户授权码

把第一步获取的授权码 auth_code 传到咱们自己的后台,也就是说后台需要编写一个接口,方便小程序端的传入

var me = this;
  my.getAuthCode({
   scopes: 'auth_user', // 主动授权(弹框):auth_user,静默授权(不弹框):auth_base
   success: (res) => {
    if (res.authCode) {
     // console.log(app.serverUrl + '/login/' + res.authCode);
     // 调用自己的服务端接口,让服务端进行后端的授权认证
     my.httpRequest({
      url: app.serverUrl + '/login/' + res.authCode,
      method: 'POST',
      header:{
       'content-type': 'application/json'
      },
      dataType: 'json',
      success: (res) => {
       // 授权成功并且服务器端登录成功
       console.log(res);
       me.setData({
        userInfo: res.data.data
       });
      }
     });
    }
   },
  });

后台拿到这个 auth_code 之后,需要调用支付宝的授权平台,从而获取用户的唯一 token 以及 支付宝的userid,都是唯一的,调用的接口为 [alipay.system.oauth.token]

获取到userid后,判断一下这个userid是否在我们自己的数据库中存在,如果存在,直接获取信息,并且直接返回用户对象到前台;如果不存在,则需要从支付宝授权平台再一次去获取支付宝用户的信息。

​调用 [alipay.user.info.share],获取用户信息,这个用户对象里包含了大量的用户真实信息,具体参考如下

@Autowired
  private UserService userService;

  @ApiOperation(value = "统一登录接口", notes = "支付宝小程序唤起登录后调用", httpMethod = "POST")
  @PostMapping("/login/{authCode}")
  public IMoocJSONResult items(
      @ApiParam(name = "authCode", 
      value = "授权码", 
      required = true, 
      example = "授权码") @PathVariable String authCode) throws Exception {

    // 1. 服务端获取access_token、user_id
    AlipaySystemOauthTokenResponse response = getAccessToken(authCode);
    if (response.isSuccess()) {
      System.out.println("获取access_token - 调用成功");
      /**
       * 获取到用户信息后保存到数据
       * 1. 如果数据库不存在对用的 alipayUserId, 则注册
       * 2. 如果存在,则获取数据库中的信息再返回
       */
      String accessToken = response.getAccessToken();
      String alipayUserId = response.getUserId();
      System.out.println("accessToken:" + accessToken);
      System.out.println("alipayUserId:" + alipayUserId);
      
      // 2. 查询该用户是否存在
      Users userInfo = userService.queryUserIsExist(alipayUserId);
      if (userInfo != null) {
        // 如果用户存在,直接返回给前端,表示登录成功
        return IMoocJSONResult.ok(userInfo);
      } else {
        // 如果用户不存在,则通过支付宝api获取用户的信息后,再注册用户到自己平台数据库
        // 获取会员信息
        AlipayUserInfoShareResponse aliUserInfo = getAliUserInfo(accessToken);
        if (aliUserInfo != null) {
           Users newUser = new Users();
           newUser.setAlipayUserId(alipayUserId);
           newUser.setNickname(aliUserInfo.getNickName());
           newUser.setRegistTime(new Date());
           newUser.setIsCertified(aliUserInfo.getIsCertified().equals("T") ? 1 : 0);
           newUser.setFaceImage(aliUserInfo.getAvatar());
           userService.createUser(newUser);
           return IMoocJSONResult.ok(newUser);
        }
      }
    } else {
      System.out.println("获取access_token - 调用失败");
    }
    return IMoocJSONResult.ok();
  }
  
  // 服务端获取access_token、user_id
  private AlipaySystemOauthTokenResponse getAccessToken(String authCode) throws Exception {
    AlipayClient alipayClient = new DefaultAlipayClient("https://openapi.alipay.com/gateway.do", 
        APPID,          // 1. 填入appid
        PRIVATE_KEY,      // 2. 填入私钥 
        "json", 
        "GBK", 
        ALIPAY_PUBLIC_KEY,     // 3. 填入公钥
        "RSA2");
    AlipaySystemOauthTokenRequest request = new AlipaySystemOauthTokenRequest();
    request.setGrantType("authorization_code");
    request.setCode(authCode);    // 4. 填入前端传入的授权码authCode
    request.setRefreshToken("201208134b203fe6c11548bcabd8da5bb087a83b");  // 0. 不用管
    AlipaySystemOauthTokenResponse response = alipayClient.execute(request);

    return response;
  }
    
  // 获取支付宝用户信息
  private AlipayUserInfoShareResponse getAliUserInfo (String accessToken) throws Exception {
    AlipayClient alipayClient = new DefaultAlipayClient("https://openapi.alipay.com/gateway.do",
        APPID,          // 1. 填入appid
        PRIVATE_KEY,      // 2. 填入私钥 
        "json", 
        "GBK", 
        ALIPAY_PUBLIC_KEY,     // 3. 填入公钥
        "RSA2");
    AlipayUserInfoShareRequest request = new AlipayUserInfoShareRequest();
    AlipayUserInfoShareResponse response = alipayClient.execute(request, accessToken);
    if(response.isSuccess()){
      System.out.println("获取会员信息 - 调用成功");
      return response;
    }

    return null;
  }

拿到的支付宝用户信息如图:

小程序登录之支付宝授权的实现示例

最终页面的展示效果为:

小程序登录之支付宝授权的实现示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js函数的延迟加载实现代码
Oct 11 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
详解vue.js的devtools安装
May 26 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 #Javascript
微信小程序点击保存图片到本机功能
Dec 13 #Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 #Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 #Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 #Javascript
使用uni-app开发微信小程序的实现
Dec 13 #Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 #Javascript
You might like
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python语言使用技巧分享
2016/05/31 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
幽灵公主观后感
2015/06/09 职场文书
植物园观后感
2015/06/11 职场文书
大学生受助感言
2015/08/01 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
在js中修改html body的样式
2021/11/11 Javascript
选购到合适的激光打印机
2022/04/21 数码科技