微信开放平台开发第三方授权登陆（四）：微信小程序

会复活的小强 發表於 2020-3-6 16:24:00

微信开放平台开发第三方授权登陆（四）：微信小程序

本文转载自：https://blog.csdn.net/qq_34190023/article/details/82351505
开发小程序需要在公众平台注册一个小程序账号，然后获取到小程序的AppID和AppSecret。就可以进行第三方登陆授权开发。
<h1>一、需求</h1>
拥有第三方微信登录功能，并获取到用户信息。
<h1>二、开发流程</h1>
小程序：
1. 微信小程序通过wx.login API进行登录获取code。由于AppID和AppSecret不能泄露给用户，根据code获取openid需要在服务端完成，所以需要将code发送给服务端
（服务端），并且带上授权临时票据code参数；
2. 服务端通过code和appid、APPSecret获取到openid和SessionKey。服务端需要返回自定义登录态给前端，不能返回SessionKey
3. 前端保存自定义登录态，获取用户信息时携带自定义登录态给后端。 <img src="https://img2020.cnblogs.com/i-beta/1377406/202003/1377406-20200306161234873-1963165657.png" alt="">
 
 
获取Token的流程 
<h1 id="%E4%B8%89%E3%80%81%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E7%9A%84%E6%8A%80%E6%9C%AF%E5%8F%8A%E5%B7%A5%E5%85%B7">三、开发使用的技术及工具</h1>
1、.后端采用IDEA2017 进行开发
2、前端使用微信开发者工具V1.02进行开发
3、使用fastJson对json数据进行处理
<h1>四、具体实现步骤</h1>
<h2 id="1.%E5%89%8D%E7%AB%AF(%E5%B0%8F%E7%A8%8B%E5%BA%8F)">1.前端(小程序)</h2>
目录结构如下：
<img src="https://img2020.cnblogs.com/i-beta/1377406/202003/1377406-20200306161542796-1431353491.png" alt="">
 
 
<h3 id="1%EF%BC%89%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F">1）自定义的全局变量</h3>
<div class="cnblogs_code">
<pre>globalData: {

userInfo: null,

sessionkey:null

}</pre>
</div>
自定义userInfo用于存储用户信息
sessionKey用于存储服务端发回给客户端的sessionkey
<h3>2）index加载时进行登录</h3>
用户登录后，服务端会返回一个sessionkey给客户端保存，如果为空，说明没有登录过，需要调用wx.login进行登录。
调用wx.login后，微信会返回一个code给小程序，小程序需要通过这个code发送给自身的服务端来获取sessionkey和openid信息。
<div class="cnblogs_code">
<pre>onLoad: function() {

    var serverUrl = app.serverUrl;

    // 加载时，检查当前用户信息是否登录

    if (app.globalData.sessionkey != null) { // 已经登录了

      // 是否授权

      wx.getSetting({

        success: function(res) {

          if (res.authSetting['scope.userInfo']) {

            // 已经授权，可以直接调用 getUserInfo 获取头像昵称

            wx.getUserInfo({

              success: function(res) {

                app.globalData.userInfo = JSON.parse(res.rawData);

              }

            })

          } else {

            // 还没有授权，则需要授权

            wx.redirectTo({

              url: '../authorization/authorization'

            })

          }

        }

      })

    } else { // 还没有登录

      // 提示用户登录授权

      wx.login({

        success: res => {

          // 发送 res.code 到后台换取 openId, sessionKey, unionId

          if (res.code) {

            // 发送请求，服务端能获取到openid和unionid，之前登录过则可以获取到之前的用户信息。

            wx.request({

              url: serverUrl + '/miniprogram/login/' + res.code, //请求路径

              method: "GET",

              success: function(res) {

                app.globalData.sessionkey = res.data;

                // 进入授权

                wx.redirectTo({

                  url: '../authorization/authorization'

                })

              }

            })

          }

        }

      })

    }

},</pre>
</div>
登录成功后，重定向到授权页面
<h3 id="3%EF%BC%89%E6%8E%88%E6%9D%83%E9%A1%B5%E9%9D%A2authorization.wxml">3）授权页面authorization.wxml</h3>
 
<div class="cnblogs_code">
<pre><view class='tag-title'>

  <image mode="widthFix" style=' width: 200rpx;height: 200rpx;margin-top:150rpx' src="/images/logo.jpg"></image>

</view>

<view wx:if="{{canIUse}}">

  <view style='text-align:center;margin-top:50rpx'>

    允许微信授权后，可体验更多功能</view>

  <view>

    <button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" >授权登录</button>

    <button bindtap='navigateBack'>返回首页</button>

  </view>

</view>

<view wx:else style='text-align:center;margin-top:50rpx'>

  您的微信版本过低，请升级后再次体验</view></pre>
</div>
Button的open-type为getUserInfo时，点击后会调用bindgetuserinfo属性配置的函数，同时带上用户基本信息（不包括Openid等）
<h3 id="4%EF%BC%89%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%E5%8F%91%E9%80%81%E7%BB%99%E5%90%8E%E7%AB%AF">4）用户信息发送给后端</h3>
<div class="cnblogs_code">
<pre>// 授权登录按钮

  bindGetUserInfo: function(e) {

    let that = this;

    var serverUrl = app.serverUrl;

    console.log(e.detail.userInfo)

    if (e.detail.userInfo) {  // 成功获取到信息

      app.globalData.userInfo = e.detail.userInfo

      // 这里可以将用户信息发送给后台

      // 获取到sessionkey

      if (app.globalData.sessionkey!=null){

        wx.request({

          url: serverUrl + '/miniprogram/userinfo', //请求路径,

          method: "GET",

          data: {

            // openid: this.openid,

            // unionid: this.unionid,

            key: app.globalData.sessionkey,

            nickname: app.globalData.userInfo.nickName, //获取昵称

            gender: app.globalData.userInfo.gender, //获取性别

            province: app.globalData.userInfo.province, //获取省份

            city: app.globalData.userInfo.city, //获取城市

            country: app.globalData.userInfo.country, //获取国家

            avatarUrl: app.globalData.userInfo.avatarUrl, //这些是用户的基本信息

            language: app.globalData.userInfo.language

          },

          success: function (res) {

            if (res.data.code == 0) {  // 请求成功

              debugger

              app.globalData.userInfo = res.data.data; // 以数据库中返回的数据为准

              // 获取用户信息成功

              wx.switchTab({

                url: '../mine/mine'

              })

            }

          }

        })

      }else{

        this.showZanTopTips('错误：SessionKey为null');

      }

    } else {

      this.showZanTopTips('您拒绝了微信授权');

    }

  },

}));</pre>
</div>
获取用户信息成功后，页面跳转到mine中显示用户详情信息
<h3 id="5%EF%BC%89%E7%94%A8%E6%88%B7%E8%AF%A6%E6%83%85%E9%A1%B5mine.wxml">5）用户详情页mine.wxml</h3>
<div class="cnblogs_code">
<pre><view class="container more">

  <view class="userinfo">

    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

    <text class="userinfo-nickname">{{userInfo.nickName}}</text>

          <text class="userinfo-nickname">性别：{{userInfo.gender === 1 ? '男':'女'}}</text>

          <text class="userinfo-nickname">城市：{{userInfo.city}}</text>

          <text class="userinfo-nickname">省份：{{userInfo.province}}</text>

          <text class="userinfo-nickname">国家：{{userInfo.country}}</text>

          <text class="userinfo-nickname">使用语言：{{userInfo.language}}</text>

  </view>

</view></pre>
</div>
<h2>2.服务端（Java）</h2>
服务端需要做的是：接受小程序前端发送的请求，根据发送过来的code，以及服务端保存的AppId和APPSecret等向微信服务端发送请求，获取到sessionkey和openid，然后将二者关联起来保存到session存储器中（Redis），返回给前端key值。
接受小程序发送过来的key和用户基本信息，根据key从redis中获取openid，然后对数据库进行查询，若存在数据则封装后返回给前端，若无信息则向数据库中插入数据并返回给前端。
<h3>1).配置文件新增小程序相关配置</h3>
<div class="cnblogs_code">
<pre>wechat.miniprogram.appid =

wechat.miniprogram.appsecret =</pre>
</div>
<h3>2)获取openid以及Sessionkey</h3>
<div class="cnblogs_code">
<pre>@ResponseBody

    @RequestMapping("/login/{code}")

    public String login(@PathVariable("code") String code) {

        String url = "https://api.weixin.qq.com/sns/jscode2session?" +

                "appid=" +

                env.getProperty("wechat.miniprogram.appid") +

                "&secret=" +

                env.getProperty("wechat.miniprogram.appsecret") +

                "&js_code=" +

                code +

                "&grant_type=authorization_code";

        JSONObject object = HttpClientUtils.httpGet(url);

        // 请求，获取openid或unionid

        // 从数据库中查询是否存储

        // 成功获取

        String unionid = (String) object.get("unionid");

        String openid = (String) object.get("openid");//用户唯一标识

        // 会话密钥session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。

        String session_key = (String) object.get("session_key");

        String key = "wechatminiprogramkey-" + UUID.randomUUID().toString().replaceAll("-", "");

        RedisPoolUtil.setEx(key, openid + "---" + session_key, 9600);

        return key;

}</pre>
</div>
<h3 id="3).%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%EF%BC%9A">3).获取用户信息：</h3>
小程序能够获取用户基本信息，但是不包括openid等信息，仅有基本的昵称等信息，需要通过后端传输的key作为标识发送到前端，然后找到对应的openid来获取。
<div class="cnblogs_code">
<pre>@ResponseBody

@RequestMapping(value = "/userinfo", method = RequestMethod.GET) // 获取用户信息

public Result getOpenId(String key, MiniProgramBaseUserInfo miniProgramBaseUserInfo) {

        MiniProgramBaseUserInfo result = null;

        String value = RedisPoolUtil.get(key);

        if (value != null) {

            String values[] = value.split("---");

            String openid = values;

            // 从数据库中查询是否存储（根据openid查询）

            result = null; // TODO: 这里是查数据库操作

            if (result == null){ // 数据库中没有数据

                // TODO: 向数据库中执行插入操作

                // insert  weChatUserInfo

                result = miniProgramBaseUserInfo;

            }

            return Result.success(result);

        return Result.error(SESSION_KEY_OVER_TIME); // SessionKey失效

    }</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">

<div class="div_masklayer" id="div_masklayer"></div>
<div class="div_popup" id="Div_popup"> <img class="img_zfb" id="img_zfb" src="https://www.cnblogs.com/images/cnblogs_com/alimayun/1442965/o_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190413152742.jpg">
</div>

<div class="autograph">
<div class="blogds">如果想给予我更多的鼓励，求打</div>
因为，我的写作热情也离不开您的肯定支持，感谢您的阅读，我是【阿里马云】！
</div> 
来源：https://www.cnblogs.com/alimayun/p/12427261.html

頁: [1]

琼殿技术论坛's Archiver

微信开放平台开发第三方授权登陆（四）：微信小程序