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


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 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
小程序自定义轮播图圆点组件
Jun 25 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php统计数组元素个数的方法
2015/07/02 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
Python调用C# Com dll组件实战教程
2017/10/12 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
C语言面试题
2013/05/19 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
考试退步检讨书
2014/01/15 职场文书
医生进修自我鉴定
2014/01/19 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
社区服务活动感想
2015/08/11 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
JavaScript 对象创建的3种方法
2021/11/17 Javascript
python turtle绘图
2022/05/04 Python