首頁 > web前端 > js教程 > 主體

用ajax實現微信網頁授權登入的步奏(附程式碼)

php中世界最好的语言
發布: 2018-03-30 15:14:12
原創
4583 人瀏覽過

這次帶給大家用ajax實現微信網頁授權登入的步奏(附程式碼),用ajax實現微信網頁授權登入的注意事項有哪些,下面就是實戰案例,一起來看一下。

專案背景

因為專案採用前後端完全分離方案,所以,無法使用常規的微信授權登入作法,需要採用 ajax 實現微信授權登入。

需求分析

因為本身就是一個phper ,所以,微信開發採用的是 EasyWeChat ,所以實作的方式是基於EW的。

其實實現這個也很麻煩,在實現之前,我們需要先了解微信授權的整個流程。

  1. 引導使用者進入授權頁面同意授權,取得code

  2. 透過code換取網頁授權access_token(與基礎支援中的access_token不同)

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

  4. 透過網頁授權access_token和openid獲取使用者基本資訊(支援UnionID機制)

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

功能實作

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

這裡需要我們做兩件事,第一去設定jsapi域名,第二設定微信網頁授權的回呼網域名稱

建構微信授權的url "<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>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。登入授權以後回調過來的URL 會攜帶兩個參數,第一個是code,另一個就是state。取得使用者基本資訊。

##
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)
      }
    })
  }
登入後複製
    相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!判斷身分證與銀行卡號格式的正則怎麼寫
  1. JS的正規如何校驗非零的正整數

以上是用ajax實現微信網頁授權登入的步奏(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板