ajax 實現微信網頁授權登錄

binaryTree 發布于2019-06-28 18:29 / 2320人閱讀

摘要：項目背景因為項目采用前后端完全分離方案，所以，無法使用常規的微信授權登錄作法，需要采用實現微信授權登錄。其實實現這個也麻煩，在實現之前，我們需要了解一下微信授權的整個流程。用戶微信登錄授權以后回調過來的會攜帶兩個參數，第一個是另一個就是。

項目背景

因為項目采用前后端完全分離方案，所以，無法使用常規的微信授權登錄作法，需要采用 ajax 實現微信授權登錄。

需求分析

因為本人是一個phper ，所以，微信開發采用的是 EasyWeChat ，所以實現的方式是基于EW的。
其實實現這個也麻煩，在實現之前，我們需要了解一下微信授權的整個流程。

引導用戶進入授權頁面同意授權，獲取code

通過code換取網頁授權access_token（與基礎支持中的access_token不同）

如果需要，開發者可以刷新網頁授權access_token，避免過期

通過網頁授權access_token和openid獲取用戶基本信息（支持UnionID機制）

其實說白了，前端只需要干一件事兒，引導用戶發起微信授權頁面,然后得到code,然后跳轉到當前頁面,然后再請求后端換取用戶以及其他相關信息。

功能實現

引導用戶喚起微信授權確認頁面

這里需要我們做兩件事，第一去配置jsapi域名，第二配置微信網頁授權的回調域名

構建微信授權的url "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split("#")[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 我們從連接中看到有兩個變量，appId,以及 redirect_uri。appId 不用多說，就是咱們將要授權的微信公眾號的appId,另一方個回調URL，其實就是我們當前頁面的URL。

用戶微信登錄授權以后回調過來的URL 會攜帶兩個參數，第一個是code,另一個就是 state。才是我們需要做的一件事兒就是將code獲取到然后傳給后端，染后端通過code 獲取用戶基本信息。

后端得到code 以后，獲取用戶基本信息，并返回相關其他信息給前端，前端獲取到然后做本地存儲或者其他。

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

function wxLogin(callback) {
    var appId = "xxxxxxxxxxxxxxxxxxx";
    var oauth_url = "xxxxxxxxxxxxxxxxxxx/oauth";
    var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split("#")[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
    var code = getUrlParam("code");
    if (!code) {
        window.location = url;
    } else {
        $.ajax({
            type: "GET",
            url: oauth_url,
            dataType: "json",
            data: {
                code: code
            },
            success: function (data) {
                if (data.code === 200) {
                    callback(data.data)
                }
            },
            error: function (error) {
                throw new Error(error)
            }
        })
    }
}

GPU云服務器云服務器微信網頁授權 php微信登錄授權 php 網頁授權登錄 php做微信授權登錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/28324.html

基于SpringBoot的微信授權登錄+仿微信朋友圈+文章查看（評論）系統

摘要：功能介紹微信網頁端顧名思義就是在微信瀏覽器上看的啦，本系統使用微信測試號條件有限授權登錄，可以查看網頁端所發的文章，對文章進行評論，回復，點贊，可修改個人的資料，可以發表說說，也是可對說說進行回復點贊評論。本系統是基于Spring Boot 技術實現的文章發布系統，該系統是我和我朋友一起做的，本文僅介紹自己的這部分，他的那部分會在本文發布后在評論里貼上鏈接，微信網頁上的操作為我所負責...

shadajin 2019-08-21 17:43 評論0 收藏0
基于SpringBoot的微信授權登錄+仿微信朋友圈+文章查看（評論）系統

摘要：功能介紹微信網頁端顧名思義就是在微信瀏覽器上看的啦，本系統使用微信測試號條件有限授權登錄，可以查看網頁端所發的文章，對文章進行評論，回復，點贊，可修改個人的資料，可以發表說說，也是可對說說進行回復點贊評論。本系統是基于Spring Boot 技術實現的文章發布系統，該系統是我和我朋友一起做的，本文僅介紹自己的這部分，他的那部分會在本文發布后在評論里貼上鏈接，微信網頁上的操作為我所負責...

mochixuan 2019-08-15 12:34 評論0 收藏0
H5/web app/第三方網頁微信授權登錄調研

摘要：微信登錄用戶可使用微信帳號快速登錄你的網站，同一用戶使用微信登錄你的不同應用和公眾帳號，會對應同一個，以便進行不同業務間的帳號統一微信授權登錄可分為掃碼登錄一般用于網頁微信開放平臺跳轉授權登錄第三方使用微信開放平臺微信內置瀏覽器內登錄一微信登錄：用戶可使用微信帳號快速登錄你的網站，同一用戶使用微信登錄你的不同應用和公眾帳號，會對應同一個UnionID，以便進行不同業務間的帳號統一 ...

keithxiaoy 2019-08-23 15:33 評論0 收藏0
說說微信掃碼登錄

摘要：詳情接口我們這里主要講的是網站應用，網站應用微信登錄是基于協議標準構建的微信授權登錄系統即上面的協議。在微信客戶端授權登錄獲取用戶信息的可以查看。微信授權登錄目前支持模式，適用于擁有端的應用授權。一、OAuth2.0 OAuth（開放授權）是一個開放標準，允許用戶讓第三方應用訪問該用戶在某一網站上存儲的私密的資源（如照片，視頻，聯系人列表），而無需將用戶名和密碼提供給第三方應用。 ...

Jokcy 2019-08-23 13:07 評論0 收藏0