Nuxt.js 的 a2workspace/laravel-social-entry 集成模組。
此套件尚未發布到 NPM 需透過下列方法安裝:
npm install -s git+https://github.com/A2Workspace/nuxt-social-entry.git
或使用 yarn
:
yarn add git+https://github.com/A2Workspace/nuxt-social-entry.git
接著將模組設定增加到 nuxt.config.js
的 modules
區塊:
export default {
modules: ['@a2workspace/nuxt-social-entry'],
};
透過增加 socialEntry
設定到 nuxt.config.js
中,你可以修改預設使用的路徑。
export default {
modules: ['@a2workspace/nuxt-social-entry'],
socialEntry: {
endpoints: {
authorization:
process.env.SOCIAL_ENTRY || 'http://localhost:8000/auth/socialite',
token: '/auth/socialite/token',
login: '/auth/socialite/login',
connect: '/auth/socialite/connect',
disconnect: '/auth/socialite/disconnect',
},
},
};
authorization
: 當進行第三方登入或授權時,將會將使用者重導到該網址。token
: 當使用者從第三方授權返回時,將會透過axios
請求該接口完成授權,並取得 臨時的 acceess_token 與使用者社群資訊。login
: 當使用者完成授權時,將會透過axios
使用該接口,並用 臨時的 acceess_token 換取正式的access_token
(通常為 JWT)connect
: 當使用者完成授權時,將會透過axios
使用該接口,並用 臨時的 acceess_token 與當前登入的帳號進行綁定。disconnect
: 當使用者要解除第三方帳號綁定時,將會透過axios
使用該接口。
設置完成後你可以透過下列方式重導到第三方平台進行授權:
this.$socialEntry.authorize('line').redirect();
這邊是個簡單範例如何重導到第三方授權,並在重導回來時完成授權:
export default {
name: 'LoginPage',
methods: {
handleLoginByLineApp() {
this.$socialEntry.authorize('line').redirect();
},
handleLoginByGoogle() {
this.$socialEntry.authorize('google').redirect();
},
},
async mounted() {
if (!this.$socialEntry.hasAuthCode()) {
return;
}
const authResponse = await this.$socialEntry.completeAuthorization();
// 判斷該帳號尚未註冊,將使用者跳轉到註冊頁面
if (authResponse.data.isNewUser) {
this.$router.push('register');
return;
}
const accessToken = this.$socialEntry.getAccessToken(authResponse);
const response = await this.$socialEntry.loginWithToken(accessToken);
if (response.data.acceess_token) {
this.$auth.setUserToken(
response.data.acceess_token,
response.data.refresh_token
);
}
},
};
這邊是個簡單範例用在個人資料頁面連結社群帳號功能:
export default {
name: 'ProfilePage',
methods: {
handleConnectingLineApp() {
this.$socialEntry.authorize('line').redirect();
},
handleDisonnectingLineApp() {
this.$socialEntry.disconnect('line', this.$auth.user.line_id);
},
},
async mounted() {
if (!this.$socialEntry.hasAuthCode()) {
return;
}
const authResponse = await this.$socialEntry.completeAuthorization();
const accessToken = this.$socialEntry.getAccessToken(authResponse);
const response = await this.$socialEntry.connectWithToken(accessToken);
if (response.data.status) {
await this.$fetch();
this.$message.info(`成功連結 ${authResponse.data.provider} 帳號`);
}
},
};
可以使用 a2workspace/laravel-social-entry-demo 作為後端測試。
首先自 Github 上下載專案:
git clone https://github.com/A2Workspace/nuxt-social-entry.git
cd nuxt-social-entry
安裝所需相依套件:
npm install
# OR
yarn
開啟測試頁面在 localhost:3000:
npm run dev