Vue中第三方登入

如何設定QQ登入

步驟：

1. 有一個網站，且已備案。網站需要有QQ登入的邏輯（登入頁面，回跳頁面）。
2. 然後再QQ互聯上進行身份驗證，稽核通過
3. 然後在QQ互聯上建立應用，應用需要域名，備案号，回調位址。稽核通過。
4. 得到：應用ID 應用key 回調位址。
5. 才能完成QQ登入。（以上四個步驟，工作後大機率由背景或運維完成）
6. 注意：id和uri都不能修改，否則無效。

如果在本地的時候使用QQ互聯

由于域名是需要備案的是以我們寫一個已經被過案的域名www.corho.com和localhost不一緻無法回調頁面，需要在本地修改hosts位址。

1. 找到 C:\Windows\System32\drivers\etc 下hosts檔案
2. 在檔案中加入  127.0.0.1       www.corho.com
3. 儲存即可。
# 如果提示沒有權限（以管理者的身份修改配置檔案即可）
1. 将hosts檔案移到桌面，然後進行修改，确認儲存。
2. 将桌面hosts檔案替換c盤檔案
           

需要開啟IP或域名通路webpack伺服器權限，在

vue.config.js

中

// 這個是給webpack-dev-server開啟可IP和域名通路權限。
  chainWebpack: config => {
    config.devServer.disableHostCheck(true)
  }
           

開始啦

• 在

  public/index.html

  中添加一個QQ的就是js檔案

• 然後再

  元件中直接使用

  在這裡直接使用這個圖檔

• 然後使用

  onMounted

  渲染元件，使用QC生成QQ登入的按鈕

setup(){
    onMounted(() => {
  		// 元件渲染完畢，使用QC生成QQ登入按鈕
  		window.QC.Login({
    		btnId: 'qqLoginBtn'
  		})
	})
}
           

總結

1. 為何需要公網回跳位址 www.corho.com ？騰訊的要求
2. 需要通過www.corho.com位址通路localhost頁面，友善開發調試（配置hosts檔案）
3. Vue腳手架預設不允許IP位址通路項目，需要配置vue.config.js檔案放開通路權限