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


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函数的引用, 关于内存的开销
Sep 17 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
angularJS 中input示例分享
Feb 09 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
小程序使用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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
js转义字符介绍
2013/11/05 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python global全局变量函数详解
2018/09/18 Python
python中退出多层循环的方法
2018/11/27 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
食品委托检验协议书范本
2014/09/12 职场文书
综合实践活动报告
2015/02/05 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
室外天线与收音机天线杆接合方法
2022/04/05 无线电
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python