快捷導(dǎo)航

微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實例詳解

更新時間：2017年09月20日 10:14:27 投稿：lqh

這篇文章主要介紹了微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下

小程序獲取用戶的頭像昵稱openid之類

第一種使用wx.getUserInfo直接獲取微信頭像，昵稱

wx.getUserInfo({
   success: function (res) {
   that.setData({
     nickName: res.userInfo.nickName,
     avatarUrl: res.userInfo.avatarUrl,
   })
   },
})

第二種

我們在使用小程序wx.login API進(jìn)行登錄的時候，直接使用wx.getUserInfo是不能獲取更多的信息的，如微信用戶的openid。
官方提示，需要發(fā)送獲取到的code進(jìn)行請求到微信的后端API，進(jìn)行用戶解密之類的操作才可以獲取，

根據(jù)文檔，只需要進(jìn)行一個get請求到如下地址即可：

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

appid和secret在微信小程序后臺可以看到，js_code為使用wx.login登錄時獲取到的code參數(shù)數(shù)據(jù)，grant_type這個不用改動。

js文件

var openId = (wx.getStorageSync('openId'))
    if (openId) {
     wx.getUserInfo({
      success: function (res) {
       that.setData({
        nickName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl,
       })
      },
      fail: function () {
       // fail
       console.log("獲取失??！")
      },
      complete: function () {
       // complete
       console.log("獲取用戶信息完成！")
      }
     })
    } else {
     wx.login({
      success: function (res) {
       console.log(res.code)
       if (res.code) {
        wx.getUserInfo({
         withCredentials: true,
         success: function (res_user) {
          wx.request({
           //后臺接口地址
           url: 'https://....com/wx/login',
           data: {
            code: res.code,
            encryptedData: res_user.encryptedData,
            iv: res_user.iv
           },
           method: 'GET',
           header: {
            'content-type': 'application/json'
           },
           success: function (res) {
            // this.globalData.userInfo = JSON.parse(res.data);
            that.setData({
             nickName: res.data.nickName,
             avatarUrl: res.data.avatarUrl,
            })
            wx.setStorageSync('openId', res.data.openId);

           }
          })
         }, fail: function () {
          wx.showModal({
           title: '警告通知',
           content: '您點擊了拒絕授權(quán),將無法正常顯示個人信息,點擊確定重新獲取授權(quán)。',
           success: function (res) {
            if (res.confirm) {
             wx.openSetting({
              success: (res) => {
               if (res.authSetting["scope.userInfo"]) {////如果用戶重新同意了授權(quán)登錄
                wx.login({
                 success: function (res_login) {
                  if (res_login.code) {
                   wx.getUserInfo({
                    withCredentials: true,
                    success: function (res_user) {
                     wx.request({
                      url: 'https://....com/wx/login',
                      data: {
                       code: res_login.code,
                       encryptedData: res_user.encryptedData,
                       iv: res_user.iv
                      },
                      method: 'GET',
                      header: {
                       'content-type': 'application/json'
                      },
                      success: function (res) {
                       that.setData({
                        nickName: res.data.nickName,
                        avatarUrl: res.data.avatarUrl,

                       })
                       wx.setStorageSync('openId', res.data.openId);
                      }
                     })
                    }
                   })
                  }
                 }
                });
               }
              }, fail: function (res) {

              }
             })

            }
           }
          })
         }, complete: function (res) {


         }
        })
       }
      }
     })

    }


 },
 globalData: {  
  userInfo: null
 }

后臺是php 框架是laravel5.4版本

官方文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.html

微信官方提供了多種編程語言的示例代碼（點擊下載）。每種語言類型的接口名字均一致。調(diào)用方式可以參照示例。

下載之后在php文件中引入：

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\User;
use App\Models\Wechatuser;
include_once  app_path('/Http/Controllers/Admin/PHP/wxBizDataCrypt.php');


 // 獲取微信用戶信息
  public function getWxLogin(Request $request)
  {
   // require_once ROOTPATH . "./PHP/wxBizDataCrypt.php";

    $code  =  $request->get('code');
    $encryptedData  =  $request->get('encryptedData');
    $iv  =  $request->get('iv');
    $appid = "***" ;
    $secret =  "***";

    $URL = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";

    $apiData=file_get_contents($URL);
    // var_dump($code,'wwwwwwww',$apiData['errscode']);
    //   $ch = curl_init();
    // 　　curl_setopt($ch, CURLOPT_URL, $URL);
    // 　　curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    // 　　curl_setopt($ch, CURLOPT_HEADER, 0);
    // 　　$output = curl_exec($ch);
    // 　　curl_close($ch)

    if(!isset($apiData['errcode'])){
      $sessionKey = json_decode($apiData)->session_key;
      $userifo = new \WXBizDataCrypt($appid, $sessionKey);

      $errCode = $userifo->decryptData($encryptedData, $iv, $data );

      if ($errCode == 0) {
        return ($data . "\n");
      } else {
        return false;
      }
    }
  }

官方文檔的登錄流程圖，整個登錄流程基本如下圖所示：