微信開發之微信環境h5頁面登入實作流程

一、unionid和openId

在了解微信環境登入流程之前，先講倆個概念：unionid和openId。

unionid表示某一個使用者在某一個公司或者商家下的使用者id(某公司或商家的身份證）；

openid表示某一個使用者在某一個公司或者商家下的某一個應用或者公衆平台下的使用者id(某一個應用或者公衆平台的身份證）

是以，某一個公司或者商家下會有多個應用或者公衆平台，那麼就通過unionid來關聯某一個使用者在不同應用或者不同平台的關系。

二、靜默授權和非靜默授權

我們在平時開發中，總會聽到産品要求是靜默授權和非靜默授權。那麼二者之前有什麼差別呢？

靜默授權的意思是使用者無感覺的擷取使用者資訊，不需要使用者有任何的操作動作，注意靜默授權隻能擷取到使用者的openId。并不能擷取到使用者的其他資訊。

非靜默授權的意思是需要使用者去操作，點選同意按鈕，也就是說，如果産品要求是非靜默授權，那麼前端會彈起使用者授權的按鈕，待使用者同意之後，就可以擷取到使用者的openId,個人資訊，關注資訊等相關内容。

注：靜默授權和非靜默授權的差別在于調用的接口的scope字段是snsapi_base還是snsapi_userinfo

三、登入流程

明白了unionid和openid、靜默授權和非靜默授權，我們也是時候該看看登入的流程了。

從上圖中我們可以看到，過程并不複雜：

首先，前端會通路微信的授權位址：

https://open.weixin.qq.com/connect/oauth2/authorize？appid=$appid&redirect_uri=$redirect_uri&response_type=code&scope=snsapi_base&state=1#wechat_redirect
           

其中：

• appid：是應用的appid
• redirect_uri：是指回跳的url
• response_type：隻寫code
• scope：表示授權的作用域，多個可以用逗号隔開，snsapi_base表示靜默授權，snsapi_userinfo表示非靜默授權
• state:用于保持請求和回調的狀态，授權請求後原樣帶回給第三方。該參數可用于防止csrf攻擊（跨站請求僞造攻擊），建議第三方帶上該參數，可設定為簡單的随機數加session進行校驗

第二步：這樣我們在跳轉回來的url就可以截取到回傳的參數code，這時我們就可以用這個code去擷取access_token和openid

// 請求url(Get)
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
           

其中：

• appid：應用的appid,
• secret: 應用密鑰AppSecret,
• code：上一步中擷取到的code
• grant_type：值為authorization_code

這樣傳回值中，我們可以拿到access_token和openid等資訊。傳回的資料如下：

名稱	類型	說明
access_token	String	access_token
expires_in	int	access_token有效時間
refresh_token	String	refresh_token
openid	String	open_id
scope	String	授權作用域

第三步：我們有了access_token和openid就可以去擷取使用者資訊了。

// 請求url(Get)
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
           

 其中：

• access_token：上一步的access_token
• openid:上一步的openid

傳回值包括有使用者手機号等：

名稱	類型	說明
openid	String	open_id
unionid	String	union_id
nickname	String	使用者昵稱
sex	int	性别
province	String	省
city	String	城市
country	String	國家
headimgurl	String	使用者頭像
privilege	Array	使用者權限

 到此登入主流程走完。為什麼說是主流程呢？因為登入的方式不同，但是主要是這樣的，比如說pc端的掃碼登入也是這樣，不過是要把所掃的二維碼的位址配置成擷取code連結。