Cordova --- 第三方app實現微信登錄功能

最近公司項目中需要添加微信登錄功能,由於我們的項目使用了ionic的框架,所以項目中基本使用了cordova的插件,下面把實現流程簡單說一下:

第一步:登錄微信開放平臺(點擊打開鏈接

1.如果您的項目在微信的開發平臺上沒有創建過項目則需要在微信開放平臺上創建項目,至於在微信上如何創建項目獲取微信的分享等功能,可以在百度上查找方法,由於我們的項目在微信平臺上已經創建了,直接在項目中點擊申請登錄功能,如下圖:

     特別說明:

     申請開通時需要通過微信認證,這個認證是需要花錢的,大概需要300元人民幣吧,只要把需要的資料都填寫好,其他審覈還是挺快的,我當天就申請完成了。

第二步:申請完成之後,我們需要在項目用添加cordova的插件-----cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID (點擊打開鏈接),YOUR_WECHAT_APPID這個是你的appid,是在微信創建項目的之後產生,安裝完插件之後寫上一下代碼,就可以在你自己的app中執行這段代碼,登錄到微信上,代碼如下:

$scope.byWEIXINlogin = function(){
  // 授權讀取用戶信息
  var scope = "snsapi_userinfo",
    state = "_" + ( + new Date());
  // 第一步:請求CODE
  Wechat.auth(scope, state, function (response) {
    // 第二步:通過code獲取access_token   在這裏就從微信返回了app,以下都是在app裏進行的操作了
    var url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=你的appid&secret=你的appSecret&code="+response.code +"&grant_type=authorization_code";
    $.get(url,function(result){
      var resultjson = $.parseJSON(result);
      var access_token = resultjson.access_token;
      var openid = resultjson.openid;
      // 第三步:通過access_token調用接口
      var url1 = "https://api.weixin.qq.com/sns/auth?access_token=" + access_token +"&openid="+ openid;
      $.get(url1,function(result){
        var statusResult = $.parseJSON(result);
        // 第四步:檢驗授權憑證(access_token)是否有效
        if("ok" == statusResult.errmsg){
          var url2 = "https://api.weixin.qq.com/sns/userinfo?access_token=" +access_token +"&openid="+ openid;
          // 獲取用戶個人信息(UnionID機制)
          $.get(url2,function(result){
            var userinfo = $.parseJSON(result);
            /*userinfo.openid;
             userinfo.nickname;
             userinfo.sex;
             userinfo.language;
             userinfo.city;
             userinfo.province;
             userinfo.country;
             userinfo.headimgurl;
             userinfo.privilege;
             userinfo.unionid;*/
          })
        }else{
          // 請重新獲取access_token
        };

      });
    })
  }, function (reason) {
    alert("Failed: " + reason);
  });
};


如果對上述代碼不明白的話,可以查看微信開放平臺的api,那上面每一步,每個參數是做什麼的,都講解得很清楚https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317851&token=5fde887dc9d41433b0f58c431d3d37042dc1bd56&lang=zh_CN(點擊打開鏈接

第三步:就是在自己的APP上把獲取的信息根據自己的需求保存起來了,需要特別強調的是

獲取用戶個人信息(UnionID機制)
接口說明

此接口用於獲取用戶個人信息。開發者可通過OpenID來獲取用戶基本信息。特別需要注意的是,如果開發者擁有多個移動應用、網站應用和公衆帳號,可通過獲取用戶基本信息中的unionid來區分用戶的唯一性,因爲只要是同一個微信開放平臺帳號下的移動應用、網站應用和公衆帳號,用戶的unionid是唯一的。換句話說,同一用戶,對同一個微信開放平臺下的不同應用,unionid是相同的。請注意,在用戶修改微信頭像後,舊的微信頭像URL將會失效,因此開發者應該自己在獲取用戶信息後,將頭像圖片保存下來,避免微信頭像URL失效後的異常情況。

  最後,如果有什麼不明白的,可以加我的qq號(294441120),可以互相學習一下!



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章