こんばんわ！ 2019年、年の瀬ですね。
実家でまったりしながら、少し前に書いたAuth0のサンプルを一つのファイルにまとめてみました。
今後触ってみる人の参考になれば幸いです。設定などは以下の記事をご参照下さい。
コピペ用index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>SPA SDK Sample</title>
</head>
<body>
<div id="app">
<h2>ログインが必要なページ（さんぷる）</h2>
<button id="btn-login" v-on:click="auth0login()">Log in</button>
<button id="btn-logout" v-on:click="auth0logout()">Log out</button>
<div v-if="login" id="gated-content">
<p>
You're seeing this content because you're currently
</p>
<label>
User profile Image:
<img :src="userData.picture" id="ipt-user-profile-image" width="200px">
<br />
</label>
<label>
User profile:
<pre id="ipt-user-profile">{{userData}}</pre>
</label>
<label>
Access token:
<pre id="ipt-access-token">{{userData.token}}</pre>
</label>
</div>
</div>
<script src="https://cdn.auth0.com/js/auth0-spa-js/1.2/auth0-spa-js.production.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
login: false,
auth0: {},
APP_PATH: '/',
userData: {}
},
methods: {
async configureClient(){
const config = {
"domain": "xxxxxxxxxxxxxx.auth0.com", //Auth0の管理画面より
"clientId": "xxxxxxxxxxxxxxx" //Auth0の管理画面より
};
//Auth0オブジェクト生成
this.auth0 = await createAuth0Client({
domain: config.domain,
client_id: config.clientId
});
},
async updateUI(){
const isAuthenticated = await this.auth0.isAuthenticated();
if (isAuthenticated) {
this.login = true; //ログイン後の情報が表示
this.userData = await this.auth0.getUser();
this.userData.token = await this.auth0.getTokenSilently();
}
},
async auth0login(){
await this.auth0.loginWithRedirect({
redirect_uri: window.location.origin + this.APP_PATH
});
},
auth0logout(){
this.auth0.logout({
returnTo: window.location.origin + this.APP_PATH
});
}
},
async mounted() {
await this.configureClient();
this.updateUI();
const isAuthenticated = await this.auth0.isAuthenticated();
if (isAuthenticated) {
return;
}
// NEW - check for the code and state parameters
const query = window.location.search;
if (query.includes("code=") && query.includes("state=")) {
// Process the login state
await this.auth0.handleRedirectCallback();
this.updateUI();
// Use replaceState to redirect the user away and remove the querystring parameters
window.history.replaceState({}, document.title, this.APP_PATH);
}
},
})
</script>
</body>
</html>
所感
この一つのファイルで試せるのは使い始めにはよいと思っています。
全然関係ないですが、ちょっとMacBookを壊してしまって、すごく久々に別の端末で記事を書いてみています。めちゃ書きにくいことを学びました。
よいお年を！