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


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 相关文章推荐
onpropertypchange
Jul 01 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
详解Python装饰器
2019/03/25 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
班级活动策划书
2014/02/06 职场文书
服装发布会策划方案
2014/05/22 职场文书
中秋手机店促销方案
2014/06/16 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
合伙购房协议样本
2014/10/06 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技