{"id":392,"date":"2019-05-28T10:11:53","date_gmt":"2019-05-28T01:11:53","guid":{"rendered":"http:\/\/localhost:8000\/?p=392"},"modified":"2021-01-23T12:14:57","modified_gmt":"2021-01-23T03:14:57","slug":"ktor-google-authentication","status":"publish","type":"post","link":"http:\/\/localhost:8000\/2019\/05\/ktor-google-authentication.html","title":{"rendered":"Ktor\u3067\u69cb\u7bc9\u3057\u305fAPI\u30b5\u30fc\u30d0\u306eGoogle OAuth\u8a8d\u8a3c\u51e6\u7406\u306e\u5168\u4f53\u50cf"},"content":{"rendered":"

\u6700\u521d\u306f\u3001Ktor\u3067API\u30b5\u30fc\u30d0\u3092\u4f5c\u308b\u306b\u3042\u305f\u308a\u3001\u516c\u5f0f\u30da\u30fc\u30b8<\/a> \u3092\u53c2\u8003\u306b\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067Google OAuth\u8a8d\u8a3c\u3092\u884c\u3046\u5b9f\u88c5\u3092\u884c\u306a\u3063\u305f\u3002
\n\u3057\u304b\u3057\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089API\u3092\u547c\u3073\u51fa\u3057\u305f\u969b\u306b\u3001
\n\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9 => \u30d0\u30c3\u30af\u30a8\u30f3\u30c9 => (redirect) => account.google.com
\n\u306e\u69d8\u306a\u6d41\u308c\u3067\u3001CORS\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u3053\u3068\u304c\u5206\u304b\u3063\u305f\uff08\u8a73\u7d30\u306f\u3053\u3061\u3089<\/a>\uff09\u3002<\/p>\n

\u30ea\u30d0\u30fc\u30b9\u30d7\u30ed\u30ad\u30b7\u3067\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30c9\u30e1\u30a4\u30f3\u3092\u7d71\u4e00\u3057\u3066\u307f\u3066\u3082\u3046\u307e\u304f\u89e3\u6c7a\u3067\u304d\u305a\u3001\u7d50\u5c40\u516c\u5f0f\u3067\u7d39\u4ecb\u3055\u308c\u3066\u3044\u308bGoogle OAuth\u8a8d\u8a3c\u306f\u8ae6\u3081\u3001\u81ea\u524d\u3067\u8a8d\u8a3c\u51e6\u7406\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u3002<\/strong><\/p>\n

\u51e6\u7406\u306e\u6d41\u308c<\/h2>\n

\"\"<\/p>\n

\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u5074\u306e\u5b9f\u88c5<\/h2>\n

package.json<\/h3>\n

vue-google-oauth2\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u8ffd\u52a0\u3059\u308b\u3002<\/p>\n

"dependencies": {\n    "vue-google-oauth2": "^1.3.8"\n  }<\/code><\/pre>\n
App.vue<\/h3>\n
\u51e6\u7406\u306e\u6d41\u308c\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n
    \n
  1. \u6700\u521d\u306b\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30d5\u30c3\u30af\u306ecreated<\/code>\u306b\u3066\u3001Google OAuth\u8a8d\u8a3c\u6a5f\u80fd\u306e\u521d\u671f\u5316\u3092\u884c\u306a\u3046\u3002<\/li>\n
  2. \u521d\u671f\u5024\u3068\u3057\u3066loggedIn = false<\/code>\u3092\u8a2d\u5b9a\u3059\u308b\u3002<\/li>\n
  3. loggedIn = false<\/code>\u306a\u306e\u3067\u3001Hoge<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u975e\u8868\u793a\u306b\u306a\u308a\u3001Login<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u8868\u793a\u3055\u308c\u308b\u3002<\/li>\n
  4. Login\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306esucceeded<\/code>\u3068\u3044\u3046\u30a4\u30d9\u30f3\u30c8\u306b\u5bfe\u3057\u3066loginSucceeded<\/code>\u3092\u7d10\u3065\u3051\u308b\u3002Login\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\u3067\u8a8d\u8a3c\u304c\u5b8c\u4e86\u3057\u305f\u3089succeeded<\/code>\u3092Emit\u3059\u308b\u3002<\/li>\n
  5. scceeded<\/code>\u30a4\u30d9\u30f3\u30c8\u304cEmit\u3055\u308c\u305f\u3089\u3001loginSucceeded<\/code>\u30e1\u30bd\u30c3\u30c9\u304ccall\u3055\u308c\u3001loggedIn = true<\/code>\u304c\u8a2d\u5b9a\u3055\u308c\u308b\u3002<\/li>\n
  6. loggedIn = true<\/code>\u306b\u306a\u3063\u305f\u306e\u3067\u3001Login<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u975e\u8868\u793a\u306b\u306a\u308a\u3001Hoge<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u8868\u793a\u3055\u308c\u308b\u3002<\/li>\n<\/ol>\n
    <template>\n  <div id="app">\n    <div v-if=loggedIn>\n      <Hoge :url=url \/>\n    <\/div>\n    <div v-else>\n      <Login @succeeded=loginSucceeded \/>\n    <\/div>\n  <\/div>\n<\/template>\n:\nimport GAuth from 'vue-google-oauth2'\n:\nexport default class App extends Vue {\n  private loggedIn: boolean = false\n\n  created (): void {\n    const GOOGLE_OAUTH_OPTION = {\n      clientId: '**********.apps.googleusercontent.com',\n      scope: 'profile email',\n      prompt: 'select_account'\n    }\n    Vue.use(GAuth, GOOGLE_OAUTH_OPTION)\n  }\n\n  @Emit()\n  loginSucceeded (): void {\n    this.loggedIn = true\n  }\n}<\/code><\/pre>\n
    Login.vue<\/h3>\n
    \u51e6\u7406\u306e\u6d41\u308c\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n
      \n
    1. @Emit<\/code>\u306b\u3088\u3063\u3066\u3001succeeded<\/code>\u30a4\u30d9\u30f3\u30c8\u304c\u5b9a\u7fa9\u3055\u308c\u308b<\/li>\n
    2. loginChecked = false<\/code>\u304c\u8a2d\u5b9a\u3055\u308c\u308b\u3002<\/li>\n
    3. \u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30d5\u30c3\u30af\u306emounted<\/code>\u306b\u3066\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30b5\u30fc\u30d0\u306b\u8a8d\u8a3c\u6e08\u307f\u304b\u3069\u3046\u304b\u3092ajax\u3067\u554f\u3044\u5408\u308f\u305b\u308b\u3002\n