amplify x Cognito(Auth)するときのlocalStorageのあたりを調べる
タイトルそのままです。
AmplifyでCognito使ってsign inしたときってデフォでlocalStorage使ってるみたいだけど、どんなタイミングで保存されてたりしてんのかとかを確認したいなと。
Amplifyのセットアップのあたりは下記の記事とか、他の方の記事とか、awsのチュートリアルとかをご覧くださいませ。
前提
- amplifyがcliで設定されている
-
amplify add auth
されていてCognitoが設定されている - amplifyのUIなどで認証の仕組みが導入されている
環境
- Windows10Home
- Windows Teminal + ubuntu18.04
- node v14.1.0
- npm 6.14.5
- amplify cli 4.24.3
localStorage
こんな感じでwatchしてみる
<script>
export default {
name: 'App',
created() {
console.log('created')
window.addEventListener('storage', this.storageEvent, false)
},
methods: {
storageEvent(e){
console.log('storage event')
console.log(e)
}
}
}
</script>
SignIn時(cognitoのIDとかtokenとか丸出しだけど公開時には消すので平気)
storage event cjs.js:23:15
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", newValue: "eyJraWQiOiJHa3BFb21xxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
cjs.js:24:15
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", newValue: "eyJraWQiOiJHa3Bxxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
cjs.js:17:15
storage event App.vue:22
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", newValue: "eyJraWxxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
App.vue:23
storage event
SignOut時
storage event cjs.js:23:15
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", oldValue: "eyJraxxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
cjs.js:24:15
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", oldValue: "eyJraxxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
cjs.js:17:15
storage event
だからどうしたって感じだなー。
当たり前だけどサインイン時に作られてアウト時に削除される。
SessionStorage
なお、aws-exports.js
をこんな感じにするとsessionStorageに切り替えることもできた。
const awsmobile = {
"aws_project_region": "ap-northeast-1",
"aws_cognito_identity_pool_id": "xxxx",
"aws_cognito_region": "ap-northeast-1",
"aws_user_pools_id": "xxxx",
"aws_user_pools_web_client_id": "xxxx",
"oauth": {},
"Auth": {
storage: window.sessionStorage,
},
};
しかし、localStorageに入れとく情報としてはけっこう危険な情報な気もしなくもない。
Amplify使ってgraphQL使ったりとかは、token漏れても情報的には痛くないような用途で使うのがいいんでしょうね。
あと閲覧可能な範囲をgraphQL+Cognitoでうまくフィルターする。
まあ、気を付けて使っていきましょう。
リソース削除
$ amplify remove auth
$ amplify push
$ amplify delete
deleteだけで全部消えるのかもしんない。
Author And Source
この問題について(amplify x Cognito(Auth)するときのlocalStorageのあたりを調べる), 我々は、より多くの情報をここで見つけました https://qiita.com/ikegam1/items/620b9d359ccf60350b1d著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .