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


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 相关文章推荐
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 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
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
使用python绘制温度变化雷达图
2019/10/18 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Django ModelForm操作及验证方式
2020/03/30 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
司机辞职报告范文
2014/01/20 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
清明节主题班会
2015/08/14 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
Nginx 匹配方式
2022/05/15 Servers