微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解
小程序獲取用戶的頭像昵稱openid之類

第一種使用wx.getUserInfo直接獲取微信頭像,昵稱
wx.getUserInfo({
success: function (res) {
that.setData({
nickName: res.userInfo.nickName,
avatarUrl: res.userInfo.avatarUrl,
})
},
})
第二種
我們?cè)谑褂眯〕绦騱x.login API進(jìn)行登錄的時(shí)候,直接使用wx.getUserInfo是不能獲取更多的信息的,如微信用戶的openid。
官方提示,需要發(fā)送獲取到的code進(jìn)行請(qǐng)求到微信的后端API,進(jìn)行用戶解密之類的操作才可以獲取,
根據(jù)文檔,只需要進(jìn)行一個(gè)get請(qǐng)求到如下地址即可:
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code appid和secret在微信小程序后臺(tái)可以看到,js_code為使用wx.login登錄時(shí)獲取到的code參數(shù)數(shù)據(jù),grant_type這個(gè)不用改動(dòng)。
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({
//后臺(tái)接口地址
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: '您點(diǎn)擊了拒絕授權(quán),將無(wú)法正常顯示個(gè)人信息,點(diǎ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
}
后臺(tái)是php 框架是laravel5.4版本
官方文檔:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.html
微信官方提供了多種編程語(yǔ)言的示例代碼(點(diǎn)擊下載)。每種語(yǔ)言類型的接口名字均一致。調(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;
}
}
}
官方文檔的登錄流程圖,整個(gè)登錄流程基本如下圖所示:

如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
簡(jiǎn)述ES6新增關(guān)鍵字let與var的區(qū)別
最近看了很多文章,偶然間看到ES6中新增了一個(gè)關(guān)鍵字 let ,它具有與 var 關(guān)鍵字相似的功能。接下來(lái)通過(guò)本文給大家介紹ES6新增關(guān)鍵字let與var的區(qū)別,需要的朋友可以參考下2019-08-08
JavaScript實(shí)現(xiàn)模態(tài)框拖拽效果
這篇文章主要介紹了通過(guò)JavaScript實(shí)現(xiàn)模態(tài)框拖拽的效果,以及鼠標(biāo)松開(kāi),可以停止拖動(dòng)模態(tài)框移動(dòng)等功能,感興趣的小伙伴可以了解一下2021-12-12
javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
wap圖片滾動(dòng)特效無(wú)css3元素純js腳本編寫
手機(jī)圖片滑動(dòng)切換,網(wǎng)上有很多這樣的例子,但都借助于其他組件,讓代碼混亂的不行,本例介紹的是無(wú)css3元素純js腳本編寫的wap圖片滾動(dòng)特效2014-08-08
javascript針對(duì)不確定函數(shù)的執(zhí)行方法
這篇文章主要介紹了javascript針對(duì)不確定函數(shù)的執(zhí)行方法,實(shí)例分析了eval函數(shù)及符號(hào)屬性兩種執(zhí)行方式,需要的朋友可以參考下2015-12-12
JS模仿手機(jī)端九宮格登錄功能實(shí)現(xiàn)代碼
這篇文章主要介紹了JS模仿手機(jī)端九宮格登錄功能實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-04-04
Area 區(qū)域?qū)崿F(xiàn)post提交數(shù)據(jù)的js寫法
這篇文章主要介紹了在Area區(qū)域的里 實(shí)現(xiàn)post 提交數(shù)據(jù) 的js寫法,需要的朋友可以參考下2014-04-04
微信小程序組件復(fù)用機(jī)制behaviors示例詳解
小程序的 behaviors方法是一種代碼復(fù)用的方式,可以將一些通用的邏輯和方法提取出來(lái),然后在多個(gè)組件中復(fù)用,從而減少代碼冗余,提高代碼的可維護(hù)性,這篇文章主要介紹了微信小程序組件復(fù)用機(jī)制behaviors示例詳解,需要的朋友可以參考下2025-02-02
JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例
本篇文章主要介紹了JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03

