uni-app系列二，微信小程序受權，獲取用戶信息和手機號碼

微信小程序中比較經常使用的就是經過微信的帳號體系受權登陸了，這樣子省去了手動註冊登陸的流程，並且信息的真實性也是比較可靠的。

這一篇，就是說明在uni-app中怎麼實現微信小程序的受權登陸操做，結合後端PHP接口實現整個流程

老規矩，開始擼碼

一 微信小程序獲取code傳到服務端獲取openid和session_key

附上文檔地址

步驟：

1. 微信小程序調用 wx.login() 獲取 臨時登陸憑證code ，並回傳到開發者服務器。
2. 服務端調用 auth.code2Session 接口，換取 用戶惟一標識 OpenID 和 會話密鑰 session_key。

二 服務端獲取開放數據

附上文檔地址

這裏使用方式一 開發者後臺校驗與解密開放數據

步驟：

1. 服務端根據微信小程序的appid,用戶openid，上一步獲取的openid還有wx.getUserInfo()方法獲取encryptedData和iv 這4個數據結合官方提供的案例解析出用戶信息的數據

2. 若解析成功，執行後續操做；解析失敗，查找失敗緣由。

以上兩個步驟就是微信官方提供的受權獲取用戶信息的方法了，具體能夠看文檔說明，這裏只是簡要說明

三 小程序端實現代碼

1.第一步就是小程序先要經過 wx.login()方法獲取code，這個只要調用方法便可獲取參數。

2.第二步是經過wx.getUserInfo()方法獲取encryptedData和iv這兩個數據，若是是第一次登陸的話，直接調用會直接進入 fail 回調，詳見公告，接口升級以後是要使用 button 組件，並將 open-type 指定爲 getUserInfo 類型，獲取用戶基本信息。由於button必須是手動點擊觸發的，因此實現思路是

2.1點擊open-type 指定爲 getUserInfo 類型的button,首先獲取encryptedData和iv信息，

2.2接着success回調裏面調用wx.login()獲取code。

2.3將code發送給服務端換取openid和session_key

2.4獲取openid成功回調以後將openid和2.1獲取到的encryptedData和iv發送給服務端解析用戶信息，執行登陸成功的操做

3.先上頁面截圖

4.重點就是 受權登陸 這個按鈕了

<button open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getUserInfo">受權登陸</button>複製代碼

指定button的open-type類型爲 getUserInfo，並設置回調方法getUserInfo()

如下是整個方法執行流程，按照執行順序依次以下

export default {
	data() {
		return {
		    userdetail: {}
		}
	},
	methods: {
		getUserInfo(res) {
			this.userdetail = res.detail; //將用戶信息存起來，下次使用
			this.login();調用wx.login()方法獲取code
		},
		login() {
		    uni.login({
			provider: 'weixin',
			    success: res => {
				this.wxLogin(res.code);
			    },
			    fail: err => {
				console.log('err', err);
			    }
			});
		},
                //調用接口,經過code換取openid,session_key保存在服務端解析時會用到
                wxLogin(code) {		    let params = {
			 code
		    };
		    this.$ajax.wxlogin(params).then(res => {
			this.wxAuth(res.data.openid);
		    });
		},
               //解析數據
		wxAuth(openid) {
			let params = {
				openid,
				iv: this.userdetail.iv,
				encryptedData: this.userdetail.encryptedData
			};
			this.$ajax.wxAuth(params).then(res => {
				uni.showToast({
                                        title: '受權成功',
                                        duration: 2000				})			});
		}
	}
}複製代碼

四 服務端實現代碼 以PHP爲例

PHP以codeigniter 爲例

//獲取openid
    public function index_post()
    {
       // 微信 appid及app_secret 微信開發者後臺獲取
        $appid = ""
        $secret = ""
        $post = $this->input->post();

        $code = trim($post['code']); //獲取小程序傳遞過來的code值

        $ajax_url = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";
        $res = functionHelper::ajax_get($ajax_url); 自定義方法發起get請求
        $data = array();
        if (!empty($res)) {
         //解析成功的數據須要json_decode轉成json格式            $res_arr = json_decode($res, true);
            if ($res_arr) {
                //將openid返回給小程序
                $data['data']['openid'] = $res_arr['openid'] ? $res_arr['openid'] : '';
                //session_key保存在redis裏面，不返回給小程序，官方是說這樣子比較安全，手動狗頭
                $this->cache->redis->save($res_arr['openid'], $res_arr['session_key'], 3000);
            }
            //返回數據
            responseHelper::response_ok($this, $data);
        } else {
            responseHelper::response_bad_request($this, "請求失敗");
        }
    }


//解密,獲取用戶信息/手機號碼
    public function auth_post()
    {
     // 微信 appid微信開發者後臺獲取        $appid = "";
        $post = $this->input->post(); //獲取小程序傳遞過來的參數
        $openid = $post['openid'];
        $encryptedData = $post['encryptedData'];
        $iv = $post['iv'];
        //根據openid從redis裏面獲取上一步存的對應openid的sessionKey
        $sessionKey = $this->cache->redis->get($openid);
        $pc = new WXBizDataCrypt($appid, $sessionKey);
        $errCode = $pc->decryptData($encryptedData, $iv, $data);
        if ($errCode == 0) {
             //解析成功的數據須要json_decode轉成json格式
            $data_arr = json_decode($data, true);
	    responseHelper::response_ok($this, $data_arr);
        } else {
            responseHelper::response_bad_request($this, "解析失敗");
        }
    }

//自定義ajax_get完整代碼以下,只需傳入拼接好的url便可
public static function ajax_get($durl)    {
        // header傳送格式
        $headers = array();
        // 初始化
        $curl = curl_init();
        // 設置url路徑
        curl_setopt($curl, CURLOPT_URL, $durl);
        // 將 curl_exec()獲取的信息以文件流的形式返回，而不是直接輸出。
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        // 在啓用 CURLOPT_RETURNTRANSFER 時候將獲取數據返回
        curl_setopt($curl, CURLOPT_BINARYTRANSFER, true);
        // 添加頭信息
        curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
        // CURLINFO_HEADER_OUT選項能夠拿到請求頭信息
        curl_setopt($curl, CURLINFO_HEADER_OUT, true);
        // 不驗證SSL
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
        // 執行
        $data = curl_exec($curl);
        // 關閉鏈接
        curl_close($curl);
        // 返回數據
        return $data;
    }複製代碼

解密數據用到的 WXBizDataCrypt 方法，能夠經過微信提供的案例下載，使用其中的PHP示例便可

五 獲取手機號碼

獲取手機號碼和獲取用戶的流程和解析方法都是同樣的，差異就是 button類型須要設置爲getPhoneNumber，僅此一個差異。獲取手機號碼的流程就留給各位小夥伴本身測試了。