Dcloud H5+微信登錄功能

首先,需要到微信開放平臺創建移動應用,獲取appid、appsecret;

其次appid、appsecret值填寫在manifest.json中的'SDK配置'中; '模塊權限配置'中選擇OAuth(登錄鑑權); 在登錄頁,添加如下代碼,獲取微信用戶信息openid和access_token:

html:

         	<div id="wx_login" style="display: none">
                <div class="other">
                    <div class="xian"></div>
                    <div class="say">或用微信登錄</div>
                    <div class="xian"></div>
                </div>
                <div class="icon">
                    <img src="./images/log_wei.png" id="wx_loginimg" onclick="wx()">
                </div>

                <p id="info" style="padding: 0 1em;text-align:left;display: none">登錄認證通道信息:</p>
                <br/>
                <div id="oauth" style="display: none"></div>
                <br/>

                <div id="output" style="display: none;">
                </div>

            </div>

js:


          if(mui.os.plus){
              var access_token = '';
              var openid = '';
              document.addEventListener('plusready', function() {
                  plus.runtime.getProperty(plus.runtime.appid,function(inf){
                      if(inf.version > 1.0){ //檢測版本號
                          if (plus.runtime.isApplicationExist({pname: 'com.tencent.mm', action: 'weixin://'})) { //檢測是否有微信客戶端
                              document.getElementById('wx_login').style.display = 'block';
                          }
      				}
                  });
      		});

              var auths={};
              function wx() {
                  // 獲取登錄認證通道
                  plus.oauth.getServices(function(services){
      //                var txt="圖標登錄認證通道信息:";
                      for(var i in services){
                          var service=services[i];
                          if(service.description == '微信'){
                              auths[service.id]=service;
                              var de = document.getElementById('wx_loginimg');
                              de.setAttribute('onclick','login(this.id)');
                              de.id=service.id;
                          }
                      }
      //                info.innerText=txt;
                  },function(e){
                      outLine("獲取登錄認證失敗:"+e.message);
                  });

              }
              // 登錄認證
              function login(id){
                  outSet("----- 登錄認證 -----");
                  var auth=auths[id];
                  if(auth){
                      var w=null;
                      if(plus.os.name=="Android"){
                          w=plus.nativeUI.showWaiting();
                      }
                      document.addEventListener("pause",function(){
                          setTimeout(function(){
                              w&&w.close();w=null;
                          },2000);
                      }, false );
                      auth.login(function(){
                          w&&w.close();w=null;
                          outLine("登錄認證成功:");
                          outLine(JSON.stringify(auth.authResult));
                          access_token = auth.authResult.access_token;
                          userinfo(auth);
                      },function(e){
                          w&&w.close();w=null;
                          outLine("登錄認證失敗:");
                          outLine("["+e.code+"]:"+e.message);
                          mui.toast('登錄失敗');
                          // plus.nativeUI.alert("詳情錯誤信息請參考授權登錄(OAuth)規範文檔:http://www.html5plus.org/#specification#/specification/OAuth.html",null,"登錄失敗["+e.code+"]:"+e.message);
                      });
                  }else{
                      outLine("無效的登錄認證通道!");
                      mui.toast('無效的登錄認證通道');
                  }
              }
      // 獲取用戶信息
              function userinfo(a){
                  outLine("----- 獲取用戶信息 -----");
                  a.getUserInfo(function(){
                      outLine("獲取用戶信息成功:");
                      outLine(JSON.stringify(a.userInfo));
                      var nickname=a.userInfo.nickname||a.userInfo.name||a.userInfo.miliaoNick;
                      openid = a.userInfo.openid;
                      wx_login(access_token,openid);
                  },function(e){
                      outLine("獲取用戶信息失敗:");
                      outLine("["+e.code+"]:"+e.message);
                      mui.toast('獲取用戶信息失敗!');
                  });
              }

              function wx_login(access_token,openid) {
                  //接口名根據具體方法名定
                  mui.ajax(apiname + '/app/app_wx_login', {
                      data:{
                          access_token:access_token,
                          openid:openid
                      },
                      dataType: 'json', //服務器返回json格式數據
                      type: 'post', //HTTP請求類型
                      timeout: 10000, //超時時間設置爲10秒;
                      success: function(data) {
                          if(data['token']){
                              localStorage.removeItem('token');
                              localStorage.clear();  //清除localstorage
                              //獲取鍵的值
                              localStorage.setItem("token", data['token']);
                              if(go){
                                  window.location.href = go;
                              }else{
                                  mui.openWindow({
                                      url: 'user.html',
                                      id:'user.html'
                                  });
                              }
                          }
                      },
                      error: function(xhr, type, errorThrown) {
                          //異常處理;
                          var s = JSON.parse(xhr['response']);
                          mui.toast(s['message']);

                      }
                  });
              }
          }

 

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