vue之微信登錄


參考文章https://www.cnblogs.com/examine/p/4634947.html

微信開放平台和公眾平台的區別
1.公眾平台面向的是普通的用戶,比如自媒體和媒體,企業官方微信公眾賬號運營人員使用。

mp.weixin.qq.com

2開放平台面向的是開發者和第三方獨立軟件開發商,微信登錄

open.weixin.qq.com

公眾平台就是服務號訂閱好的管理開發后台

第三方登錄就是依托開放平台的功能

 

網站應用微信登錄是基於OAuth2.0協議標准構建的微信OAuth2.0授權登錄系統。

在進行微信OAuth2授權之前,在微信開放平台注冊開發者賬號,並擁有一個已審核的網站應用,並獲取相應的AppID和AppSecret,申請微信登錄並通過審核后,可開始接入流程。

微信OAuth2.0授權登錄讓微信用戶使用微信身份安全登錄第三方應用或網站,在微信用戶授權登錄已接入微信OAuth2.0的第三方應用后,第三方可以獲取用戶的接口調用憑證(access_token),通過access_token可以進行微信開放平台授權關系接口調用,從而可實現獲取微信用戶基本開放信息和幫助用戶實現基礎開放功能等。

1.第三方發起微信授權登錄請求,微信用戶允許授權第三方應用后,微信會拉起應用或重定向到第三方網站,並且帶上授權臨時票據code參數

2.通過code參數加上AppID和AppSecret等,通過API換區access_token

3,通過access_token進行接口的調用,獲取用戶基本數據

 

第一步:請求code

第三方使用網站應用授權登錄前請注意已獲取相應網頁授權作用域(scope=snsapi_login),則可以通過在PC端打開以下鏈接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

若提示“該鏈接無法訪問”,請檢查參數是否填寫錯誤,如redirect_uri的域名與審核時填寫的授權域名不一致或scope不為snsapi_login。

用戶允許授權后,將會重定向到redirect_uri的網址上,並且帶上code和state參數

redirect_uri?code=CODE&state=STATE

第二種獲取code的方式

 JS微信登錄主要用途:網站希望用戶在網站內就能完成登錄,無需跳轉到微信域下登錄后再返回,提升微信登錄的流暢性與成功率。 網站內嵌二維碼微信登錄JS實現辦法:

步驟1:在頁面中先引入如下JS文件(支持https):

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

步驟2:在需要使用微信登錄的地方實例以下JS對象:

                          var obj = new WxLogin({

                              id:"login_container", 

                              appid: "", 

                              scope: "", 

                              redirect_uri: "",

                              state: "",

                              style: "",

                              href: ""

                            });

第二步:通過code獲取access_token

通過code獲取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

-----------------------------------------------以上都是跟着別人博客的理論知識,下面直接說我項目中的使用

由於我使用的是vue開發

created里面寫微信登錄的接口(掃碼之后拿到code當做參數)
mounted里面微信登錄授權獲取基本信息

getWinxin().then(res=>{
     let data=ree.data.data;
    var obj = new WxLogin({

                              id:"login_container", 

                              appid: data.appid, 

                              scope: "", 

                              redirect_uri: data.redirect_uri,

                              state: "",

                              style: "",

                              href: ""

                            });
})
就是參照博客上

然后掃碼之后通過this.$router.code拿code參數

請求接口,然后回調函數做你想干的事情


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM