微信小程序中比較常用的就是通過微信的賬號體系授權(quán)登錄了，這樣子省去了手動注冊登錄的流程，而且信息的真實性也是比較可靠的。

這一篇，就是說明在uni-app中怎么實現(xiàn)微信小程序的授權(quán)登錄操作，結(jié)合后端PHP接口實現(xiàn)整個流程

老規(guī)矩，開始擼碼

步驟：

1. 微信小程序調(diào)用 wx.login() 獲取 臨時登錄憑證code ，并回傳到開發(fā)者服務(wù)器。
2. 服務(wù)端調(diào)用 auth.code2Session 接口，換取 用戶唯一標(biāo)識 OpenID 和 會話密鑰 session_key。

這里使用方式一 開發(fā)者后臺校驗與解密開放數(shù)據(jù)

步驟：

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

2. 若解析成功，執(zhí)行后續(xù)操作；解析失敗，查找失敗原因。

以上兩個步驟就是微信官方提供的授權(quán)獲取用戶信息的方法了，具體可以看文檔說明，這里只是簡要說明

1.第一步就是小程序先要通過 wx.login()方法獲取code，這個只要調(diào)用方法即可獲取參數(shù)。

2.第二步是通過wx.getUserInfo()方法獲取encryptedData和iv這兩個數(shù)據(jù)，如果是第一次登錄的話，直接調(diào)用會直接進(jìn)入 fail 回調(diào)，詳見公告，接口升級之后是要使用 button 組件，并將 open-type 指定為 getUserInfo 類型，獲取用戶基本信息。因為button必須是手動點擊觸發(fā)的，所以實現(xiàn)思路是

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

2.2接著success回調(diào)里面調(diào)用wx.login()獲取code。

2.3將code發(fā)送給服務(wù)端換取openid和session_key

2.4獲取openid成功回調(diào)之后將openid和2.1獲取到的encryptedData和iv發(fā)送給服務(wù)端解析用戶信息，執(zhí)行登錄成功的操作

3.先上頁面截圖

4.重點就是 授權(quán)登錄 這個按鈕了

<button open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getUserInfo">授權(quán)登錄</button>
復(fù)制代碼

指定button的open-type類型為 getUserInfo，并設(shè)置回調(diào)方法getUserInfo()

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

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

PHP以codeigniter 為例

//獲取openid
    public function index_post()
    {
       // 微信 appid及app_secret 微信開發(fā)者后臺獲取
        $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); 自定義方法發(fā)起get請求
        $data = http://www.wxapp-union.com/array();
        if (!empty($res)) {
         //解析成功的數(shù)據(jù)需要json_decode轉(zhuǎn)成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);
            }
            //返回數(shù)據(jù)
            responseHelper::response_ok($this, $data);
        } else {
            responseHelper::response_bad_request($this, "請求失敗");
        }
    }

//解密,獲取用戶信息/手機(jī)號碼
    public function auth_post()
    {
     // 微信 appid微信開發(fā)者后臺獲取        $appid = "";
        $post = $this->input->post(); //獲取小程序傳遞過來的參數(shù)
        $openid = $post['openid'];
        $encryptedData = http://www.wxapp-union.com/$post['encryptedData'];
        $iv = $post['iv'];
        //根據(jù)openid從redis里面獲取上一步存的對應(yīng)openid的sessionKey
        $sessionKey = $this->cache->redis->get($openid);
        $pc = new WXBizDataCrypt($appid, $sessionKey);
        $errCode = $pc->decryptData($encryptedData, $iv, $data);
        if ($errCode == 0) {
             //解析成功的數(shù)據(jù)需要json_decode轉(zhuǎn)成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();
        // 設(shè)置url路徑
        curl_setopt($curl, CURLOPT_URL, $durl);
        // 將 curl_exec()獲取的信息以文件流的形式返回，而不是直接輸出。
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        // 在啟用 CURLOPT_RETURNTRANSFER 時候?qū)@取數(shù)據(jù)返回
        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);
        // 執(zhí)行
        $data = http://www.wxapp-union.com/curl_exec($curl);
        // 關(guān)閉連接
        curl_close($curl);
        // 返回數(shù)據(jù)
        return $data;
    }
復(fù)制代碼

獲取手機(jī)號碼和獲取用戶的流程和解析方法都是一樣的，差別就是 button類型需要設(shè)置為getPhoneNumber，僅此一個差別。獲取手機(jī)號碼的流程就留給各位小伙伴自己測試了。