![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt1b.png\")
<\/p>\n<\/p>\n
\u3069\u3082\u3067\u3059\u3002<\/p>\n
\u524d\u56de\u306e\u300cDjango django-rest-auth + Nuxt.js auth-module \u3067\u4f5c\u308b SPA JWT OAuth \u30ed\u30b0\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0 \u305d\u306e\uff12<\/a>\u300d\u306e\u7d9a\u304d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u524d\u56de\u3067\u306f\u3001Django rest-auth\u3092\u7528\u3044\u3066\u3001JWT\u3092\u7528\u3044\u3066OAuth\u8a8d\u8a3c\u3092\u5b9f\u88c5\u3044\u305f\u3057\u307e\u3057\u305f\u306e\u3067\u3001\u4eca\u56de\u306f\u30d5\u30ed\u30f3\u30c8\u5074\u306e\u5b9f\u88c5\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u30d5\u30ed\u30f3\u30c8\u5074\u306f\u3001Nuxt.js\u3068\u8a8d\u8a3c\u30e2\u30b8\u30e5\u30fc\u30eb\u306bNuxt\u00a0auth-module\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n Nuxt\u00a0auth-module Document<\/strong><\/p>\n https:\/\/auth.nuxtjs.org\/<\/a><\/p>\n \u4eca\u56de\u306f\u3001SPA\u3067\u306eJWT\u3092\u7528\u3044\u3066OAuth\u8a8d\u8a3c\u306e\u5b9f\u88c5\u306b\u95a2\u3057\u3066\u306a\u306e\u3067\u3001Nuxt.js\u3084auth modeule\u306e\u89e3\u8aac\u306a\u3069\u306f\u884c\u308f\u306a\u3044\u306e\u3067\u3054\u4e86\u627f\u304f\u3060\u3055\u3044\u3002<\/p>\n GitHub<\/strong><\/p>\n https:\/\/github.com\/webcyou-org\/simple-rest-login-front<\/a><\/p>\n \u65e9\u901f\u753b\u9762\u3092\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n 1\u304b\u3089\u4f5c\u6210\u3082\u3088\u3044\u306e\u3067\u3059\u304c\u3001\u65e2\u5b58\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u7b49\u3082\u4f7f\u3044\u306a\u304c\u3089\u306a\u308b\u3079\u304f\u624b\u3092\u52d5\u304b\u3055\u305a\u4f5c\u6210\u3057\u3066\u3044\u304d\u305f\u3044\u306e\u3067\u3001@nuxtjs\/auth\uff08auth-module\uff09\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u3092\u6d41\u7528\u3057\u3064\u3064\u3001\u3061\u3087\u3063\u3068\u624b\u3092\u52a0\u3048\u308b\u5f62\u3067\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n \u30c7\u30e2\u30da\u30fc\u30b8<\/strong><\/p>\n https:\/\/nuxt-auth.herokuapp.com\/login<\/a><\/p>\n GitHub<\/strong><\/p>\n https:\/\/github.com\/nuxt-community\/auth-module\/tree\/dev\/demo<\/a><\/p>\n auth-module\u30ec\u30dd\u30b8\u30c8\u30ea\u306e\u300cdemo<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u8a72\u5f53\u306e\u30bd\u30fc\u30b9\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u30c7\u30e2\u30da\u30fc\u30b8\u3092\u898b\u3066\u3044\u305f\u3060\u304f\u3068\u5206\u304b\u308b\u306e\u3067\u3059\u304c\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3001\u8272\u3005\u306aOAuth\u30ed\u30b0\u30a4\u30f3\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u5f62\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n \u3067\u3059\u304c\u3001\u4eca\u56de\u306f\u30b5\u30fc\u30d0\u30fc\u5074\u3067\u3082OAuth\u30ed\u30b0\u30a4\u30f3\u306f\u3001\u300cGoogle\u300d\u306e\u307f\u306e\u5bfe\u5fdc\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u306e\u3067\u3001\u305d\u308c\u4ee5\u5916\u306e\u4f7f\u7528\u3057\u306a\u3044\u5206\u306f\u524a\u9664\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n \u307e\u305f\u3001top\u30da\u30fc\u30b8\u3082\u5c11\u3057\u6539\u4fee\u3057\u3001\u4ee5\u4e0b\u306e\u69d8\u306a\u8868\u793a\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n \u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u3082\u7c21\u7d20\u306a\u3082\u306e\u306b\u3057\u307e\u3059\u3002<\/p>\n \u30e6\u30fc\u30b6\u30fc\u30cd\u30fc\u30e0\u30ed\u30b0\u30a4\u30f3\u3068\u306a\u3063\u3066\u3044\u305f\u306e\u3092\u3001\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306b\u3088\u308b\u8a8d\u8a3c\u3068\u5909\u66f4\u3057\u305f\u3044\u306e\u3067\u3001UI\u3082\u305d\u308c\u306b\u4f34\u3044\u4fee\u6b63<\/strong>\u3057\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n \u30da\u30fc\u30b8\uff08page\uff09\u6539\u4fee\u306e\u8a73\u7d30\u8aac\u660e\u306f\u5272\u611b\u3055\u305b\u3066\u9802\u304d\u3001\u91cd\u8981\u306a\u8981\u70b9\u3092\u7d5e\u3063\u305f\u89e3\u8aac\u3092\u3055\u305b\u3066\u9802\u304d\u307e\u3059\u306e\u3067\u3001<\/p>\n \u8a73\u7d30\u3092\u77e5\u308a\u305f\u3044\u65b9\u306f\u3001GitHub\u306e\u30bd\u30fc\u30b9\u3092\u53c2\u7167\u3057\u3066\u3044\u305f\u3060\u3051\u308c\u3070\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n GitHub<\/strong><\/p>\n https:\/\/github.com\/webcyou-org\/simple-rest-login-front\/tree\/master\/pages<\/a><\/p>\n \u305d\u308c\u3067\u306f\u3001nuxt.config\u3092\u4f5c\u6210\uff08\u6539\u4fee\uff09\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n \u307e\u305a\u3001SPA\u3067\u4f5c\u6210\u3057\u3066\u3044\u304d\u305f\u3044\u306e\u3067\u3001\u4ee5\u4e0b\u306e\u69d8\u306bmode\u3092\u300cspa\u300d\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n nuxt.config.ts<\/strong><\/p>\n \u30b5\u30fc\u30d0\u30fc\uff08Django Rest Framework \uff08localhost:8000\u3067\u7acb\u3061\u4e0a\u3052\u3066\u3044\u308b\uff09\uff09\u5074\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3059\u308b\u969b\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u300c\/server\u300d\u3068\u3057\u3001proxy\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u5b9f\u969b\u306b\u306f\u300c\/server\u300d\u3068\u30ea\u30af\u30a8\u30b9\u30c8\u3055\u308c\u305f\u3082\u306e\u306f\u3001localhost:8000\/\u306b\u9001\u4fe1\u3055\u308c\u308b\u5f62\u3068\u306a\u308a\u307e\u3059\u3002\u3053\u308c\u3092\u884c\u308f\u306a\u3044\u3068Nuxt.js\u306eaxios\u5074\u3067CORS(Cross-Origin Resource Sharing)\u3067\u30a8\u30e9\u30fc\u3068\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u305d\u306e\u56de\u907f\u65b9\u6cd5\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u7d9a\u3044\u3066\u3001@nuxtjs\/auth\uff08auth-module\uff09\u306e\u8a2d\u5b9a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u307e\u305a\u3001localStorage\u306b\u4fdd\u5b58\u3059\u308b\u5f62\u306b\u3057\u305f\u3044\u306e\u3067\u300ccookie\u300d\u3092false\u3068\u3057\u3001\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u8a2d\u5b9a\u306f\u300ccallback: ‘\/callback’\u300d\u300clogout: ‘\/signed-out’\u300d\u300chome: false\u300d\u3068\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n \u3053\u3053\u3067\u3001\u4e3b\u306b\u624b\u3092\u52a0\u3048\u305f\u70b9\u306f\u300chome: false\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u3053\u3061\u3089\u306f\u3001\u30ed\u30b0\u30a4\u30f3\u5f8c\u306e\u9077\u79fb\u3059\u308b\u30da\u30fc\u30b8\u306e\u6307\u5b9a\u3068\u306a\u308a\u307e\u3059\u304c\u3001\u3053\u3053\u3067\u8a2d\u5b9a\u3092\u884c\u3063\u3066\u3057\u307e\u3046\u3068OAuth\u8a8d\u8a3c\u30d5\u30ed\u30fc\u306ecallback\u6642\u306b\u3001\u81ea\u52d5\u7684\u306b@nuxtjs\/auth\uff08auth-module\uff09\u5074\u3067\u30ed\u30b0\u30a4\u30f3\u3057\u305f\u5f62\u3068\u306a\u3063\u3066\u3057\u307e\u3046\u306e\u3067\u305d\u308c\u3092\u56de\u907f\u3059\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n callback\u306e\u969b\u306b\u3001\u81ea\u52d5\u3067\u9077\u79fb\u3055\u305b\u305a\u3001\u30b5\u30fc\u30d0\u30fc\uff08Django Rest Framework \uff08localhost:8000\u3067\u7acb\u3061\u4e0a\u3052\u3066\u3044\u308b\uff09\uff09\u5074\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3057\u3001\u305d\u306e\u7d50\u679c\u3067\u30ed\u30b0\u30a4\u30f3\u3001\u30ed\u30b0\u30a4\u30f3\u5931\u6557\u3092\u5224\u5b9a\u3055\u305b\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n \u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u30d5\u30ed\u30fc\u306e\u30dd\u30a4\u30f3\u30c8\u306e\u7b87\u6240\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u7d9a\u3044\u3066\u3001@nuxtjs\/auth\uff08auth-module\uff09\u306estrategies\u306e\u8a2d\u5b9a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u307e\u305a\u3001local\u3067\u3059\u304c\u3001\u300c\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<\/strong>\u300d\u3068\u300c\u30d1\u30b9\u30ef\u30fc\u30c9<\/strong>\u300d\u3067\u30ed\u30b0\u30a4\u30f3\u3059\u308b\u6642\u306eAPI\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u8a2d\u5b9a\u3057\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n \u30ed\u30b0\u30a4\u30f3\u6642\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8<\/strong>\u3068\u3001\u30e1\u30bd\u30c3\u30c9<\/strong>\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u540d<\/strong>\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u300cpropertyName: ‘token’<\/strong>\u300d\u306f\u3001\u30ec\u30b9\u30dd\u30f3\u30b9\u306e\u30ad\u30fc\u304c\u3001\u300ctoken\u300d\u3067\u8fd4\u5374\u3055\u308c\u307e\u3059\u306e\u3067\u305d\u308c\u3092\u53d7\u3051\u53d6\u308b\u70ba\u306e\u6307\u5b9a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n endpoints<\/strong>\u306euser<\/strong>\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u3092\u53d6\u5f97\u3059\u308b\u30d5\u30ed\u30fc\u306e\u969b\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u8a2d\u5b9a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u30ed\u30b0\u30a4\u30f3\u5f8c\u3001\u81ea\u52d5\u7684\u306b\u3053\u3061\u3089\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u304c\u53e9\u304b\u308c\u308b\u306e\u3068\u3001SSR\u51e6\u7406\uff08\u30d6\u30e9\u30a6\u30b6\u30ea\u30ed\u30fc\u30c9\uff09\u306a\u3069\u8d70\u3063\u305f\u6642\u306b\u3082\u3001\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u3044\u308b\u72b6\u614b\u3067\u3042\u308c\u3070\u81ea\u52d5\u7684\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3059\u308b\u5f62\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n \u307e\u305f\u3001\u3053\u3053\u3067\u3001\u6ce8\u610f\u3057\u305f\u3044\u70b9\u304c\u300ctokenType: ‘JWT’<\/strong>\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u5148\u7a0b\u306e\u300c\u30e6\u30fc\u30b6\u30fc\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u53d6\u5f97<\/strong>\u300d\u306eAPI\u306a\u3069\u3001\u81ea\u52d5\u7684\u306b\u53d6\u5f97\u3059\u308bAPI\u306fJWT\u30c8\u30fc\u30af\u30f3\u304c\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u30fc\u306eAuthorization\u306b\u4ed8\u4e0e\u3055\u308c\u3066\u30ea\u30af\u30a8\u30b9\u30c8<\/strong>\u3055\u308c\u308b\u5f62\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n django-rest-auth\u5074\u3067\u306f\u300c’JWT dqwfryth439rt34gninf’\u300d\u3068\u3001\u300cJWT\u300d\u306e\u6587\u5b57\u5217\u304c\u5148\u982d\u306b\u4ed8\u4e0e\u3055\u308c\u305f\u5f62\u3067\u53d7\u3051\u53d6\u308b\u69d8\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u5f62\u9001\u4fe1\u3059\u308b\u70ba\u306e\u6307\u5b9a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u6700\u5f8c\u306bGoogle\u306e\u8a2d\u5b9a\u3067\u3059\u304c\u3001Google Cloud Platform\u306b\u767b\u9332\u3055\u308c\u305f\u300cclient_id\u300d\u306e\u6307\u5b9a\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n response_type\u306f’code token’,\u3068\u8a2d\u5b9a\u3002<\/p>\n \u3053\u308c\u306b\u3088\u3063\u3066\u3001OAuth 2.0 Multiple Response Type<\/strong> \u306e\u6307\u5b9a\u3092\u884c\u3044\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u30d5\u30ed\u30fc\u3092\u958b\u59cb\u3057\u3066\u3044\u308b\u3053\u3068\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n scope\u306f\u53d6\u5f97\u3057\u305f\u3044\u30c7\u30fc\u30bf\u3092\u4efb\u610f\u3067\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n \u6700\u5f8c\u306b\u300cuserinfo_endpoint<\/strong>\u300d\u3067\u3059\u304c\u3001\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u8a8d\u8a3c\uff08local\uff09\u540c\u69d8\u3001\u300c\u30e6\u30fc\u30b6\u30fc\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u53d6\u5f97<\/strong>\u300d\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306e\u6307\u5b9a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u8a8d\u8a3c\u3068\u3001\u30ad\u30fc\u306f\u7570\u306a\u308a\u307e\u3059\u304c\u4e0a\u8a18\u306e\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u8a8d\u8a3c\u306e\u969b\u306b\u8aac\u660e\u3057\u305f\u540c\u69d8\u306e\u51e6\u7406\u306e\u70ba\u306e\u6307\u5b9a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u3053\u308c\u3067\u3001nuxt.config\u306e\u8a2d\u5b9a\u5b8c\u4e86\u3002<\/p>\n \u7d9a\u3044\u3066\u300ccallback\u300d\u306e\u4f5c\u6210\u3092\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n \u300ccallback.vue\u300d\u306f\u3001ID\u30d7\u30ed\u30d0\u30a4\u30c0\u306e\u8a8d\u53ef\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3057\u3001\u8868\u793a\u3055\u308c\u305f\u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u3088\u308a\u30ed\u30b0\u30a4\u30f3\u5f8c\u3001\u300c\u8a8d\u53ef\u30b3\u30fc\u30c9<\/strong>\u300d\u3068\u300c\u30a2\u30af\u30bb\u30b9\u30c8\u30fc\u30af\u30f3<\/strong>\u300d\u304c\u8fd4\u5374\u3055\u308c\u3001\u8868\u793a\u3059\u308b\u30da\u30fc\u30b8\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n \u3001@nuxtjs\/auth\uff08auth-module\uff09\u306e\u30c7\u30e2\u3067\u306f\u3001callback\u6642\u306b\u81ea\u52d5\u7684\u306b\u30ed\u30b0\u30a4\u30f3\u5f8c\u306e\u30da\u30fc\u30b8\u3078\u3068\u9077\u79fb\u3057\u307e\u3059\u304c\u3001\u4eca\u56de\u3001\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u30d5\u30ed\u30fc\u306e\u70ba\u300ccallback.vue\u300d\u306b\u3066\u3001\u8fd4\u5374\u3055\u308c\u305f\u300c\u8a8d\u53ef\u30b3\u30fc\u30c9<\/strong>\u300d\u3068\u300c\u30a2\u30af\u30bb\u30b9\u30c8\u30fc\u30af\u30f3<\/strong>\u300d\u3092\u3001\u30b5\u30fc\u30d0\u30fc\uff08Django Rest Framework \uff08localhost:8000\u3067\u7acb\u3061\u4e0a\u3052\u3066\u3044\u308b\uff09\uff09\u5074\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3057\u307e\u3059\u3002<\/p>\n this.$auth.$state.strategy\u3067\u3001\u73fe\u5728\u8a8d\u8a3c\u3092\u884c\u3063\u3066\u3044\u308b\u30d7\u30ed\u30d0\u30a4\u30c0\u540d\u304c\u53d6\u5f97\u3067\u304d\u307e\u3059\u306e\u3067\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u6210\u529f\u3057\u305f\u969b\u306b\u3001\u30ec\u30b9\u30dd\u30f3\u30b9\u3088\u308aJWT\u30c8\u30fc\u30af\u30f3\u3092\u53d7\u3051\u3068\u308a@nuxtjs\/auth\uff08auth-module\uff09\u306e\u65b9\u306b\u8a72\u5f53\u3059\u308b\u30d7\u30ed\u30d0\u30a4\u30c0\u306eJWT\u30c8\u30fc\u30af\u30f3\u3092\u30bb\u30c3\u30c8\u3057\u307e\u3059\u3002<\/p>\n user\u60c5\u5831\u3068\u3001user token\u3082\u540c\u69d8\u306b’JWT \u30c8\u30fc\u30af\u30f3’\u306e\u5f62\u3067\u30bb\u30c3\u30c8\u3057\u307e\u3059\u3002<\/p>\n \u6210\u529f\u3057\u305f\u969b\u306f\u3001\u30ed\u30b0\u30a4\u30f3\u5f8c\u8868\u793a\u3059\u308b\u300csecure\u300d\u30da\u30fc\u30b8\u306b\u9077\u79fb\u3002<\/p>\n \u5931\u6557\u306e\u969b\u306f\u3001\u4e00\u65e6\u30ed\u30b0\u30a2\u30a6\u30c8\u51e6\u7406\u3092\u884c\u3044\u3001\u30eb\u30fc\u30c8\u30da\u30fc\u30b8\u306b\u9077\u79fb\u3055\u305b\u307e\u3059\u3002<\/p>\n \u305d\u308c\u3067\u306f\u3001\u4e00\u901a\u308a\u63c3\u3063\u305f\u306e\u3067\u3001\u524d\u56de<\/a>\u4f5c\u6210\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u3067\u30ed\u30b0\u30a4\u30f3\u3092\u884c\u3063\u3066\u884c\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n \u307e\u305a\u306f\u3001\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u3067\u306e\u8a8d\u8a3c\u3092\u8a66\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n \u30ed\u30b0\u30a4\u30f3\u6210\u529f\u3057\u3001\u8a8d\u8a3c\u6e08\u307f\u306e\u30e6\u30fc\u30b6\u30fc\u306e\u307f\u8868\u793a\u3059\u308b\u30da\u30fc\u30b8\u306e\u300csecure\u300d\u30da\u30fc\u30b8\u306b\u9077\u79fb\u3057\u3001\u30ed\u30b0\u30a4\u30f3\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u304c\u8868\u793a\u3057\u3066\u3044\u308b\u306e\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n OAuth\uff08google\uff09\u3067\u306e\u30ed\u30b0\u30a4\u30f3\u3082\u8a66\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n \u3053\u3061\u3089\u306f\u3001\u30ea\u30a2\u30eb\u306a\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u5229\u7528\u3057\u3066\u3044\u308b\u306e\u3067\u753b\u50cf\u306f\u7701\u7565\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3059\u304c\u3001\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u8a8d\u8a3c\u3068\u540c\u69d8\u3067\u554f\u984c\u306a\u304f\u30ed\u30b0\u30a4\u30f3\u3067\u304d\u300csecure\u300d\u30da\u30fc\u30b8\u306b\u9077\u79fb\u3057\u3001\u30ed\u30b0\u30a4\u30f3\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u304c\u8868\u793a\u3057\u3066\u3044\u308b\u306e\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n \u30e6\u30fc\u30b6\u30fc\u767b\u9332\u304c\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u65b0\u898f\u4f5c\u6210\u3055\u308c\u3001\u65e2\u306b\u30a2\u30ab\u30a6\u30f3\u30c8\u304c\u5b58\u5728\u3059\u308b\u5834\u5408\u306f\u30ed\u30b0\u30a4\u30f3\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u3067\u306e\u30ed\u30b0\u30a4\u30f3\u3001OAuth\uff08Google\uff09\u3067\u306e\u30ed\u30b0\u30a4\u30f3\u304c\u305d\u308c\u305e\u308c\u78ba\u8a8d\u3067\u304d\u307e\u3057\u305f\u306e\u3067\u3001\u6700\u5f8c\u306f\u30e6\u30fc\u30b6\u30fc\u767b\u9332\u3067\u304d\u308b\u3088\u3046\u306b\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n \u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u306e\u300clogin.vue\u300d\u3092\u30b3\u30d4\u30fc\u3057\u3001\u300cregistration.vue\u300d\u3092\u4f5c\u6210\u3001\u4ee5\u4e0b\u306e\u69d8\u306b\u300cEmail\u300d\u300cPassword\u300d\u300cPasswordConfirm\u300d\u304c\u5165\u529b\u3067\u304d\u308b\u3088\u3046\u306b\u6539\u4fee\u3057\u307e\u3057\u305f\u3002<\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/8a6c9f355fa9674f28906d574518031a.png\")
<\/p>\n\u4eca\u56de\u4f5c\u6210\u3057\u305f\u30bd\u30fc\u30b9<\/h4>\n
\u30d0\u30fc\u30b8\u30e7\u30f3<\/h4>\n
\n
\u753b\u9762\u4f5c\u6210<\/h4>\n
![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_0.png\")
<\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_1.png\")
<\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_2.png\")
<\/p>\nnuxt.config\u4f5c\u6210<\/h4>\n
mode: 'spa',<\/pre>\n
proxy: {\r\n '\/server\/': {\r\n target: 'http:\/\/localhost:8000\/',\r\n pathRewrite: { '^\/server\/': '' }\r\n }\r\n},<\/pre>\nauth: {\r\n cookie: false,\r\n redirect: {\r\n callback: '\/callback',\r\n logout: '\/signed-out',\r\n home: false\r\n },\r\n...<\/pre>\nstrategies: {\r\n local: {\r\n tokenType: 'JWT',\r\n endpoints: {\r\n login: { url: '\/server\/rest-auth\/login\/', method: 'post', propertyName: 'token' },\r\n user: { url: '\/server\/rest-auth\/user\/', method: 'get', propertyName: '' }\r\n }\r\n },\r\n google: {\r\n client_id: 'YOUR_GOOGLE_CLIENT_ID',\r\n response_type: 'code token',\r\n scope: ['email', 'profile'],\r\n userinfo_endpoint: '\/server\/rest-auth\/user\/'\r\n }\r\n}<\/pre>\ngoogle: {\r\n client_id: 'YOUR_GOOGLE_CLIENT_ID',\r\n response_type: 'code token',\r\n scope: ['email', 'profile'],\r\n userinfo_endpoint: '\/server\/rest-auth\/user\/'\r\n}<\/pre>\nconst config: Configuration = {\r\n mode: 'spa',\r\n build: {\r\n extractCSS: true\r\n },\r\n buildModules: [\r\n '@nuxt\/typescript-build'\r\n ],\r\n modules: [\r\n 'bootstrap-vue\/nuxt',\r\n '@nuxtjs\/axios',\r\n '@nuxtjs\/auth'\r\n ],\r\n axios: {\r\n proxy: true\r\n },\r\n proxy: {\r\n '\/server\/': {\r\n target: 'http:\/\/localhost:8000\/',\r\n pathRewrite: { '^\/server\/': '' }\r\n }\r\n },\r\n auth: {\r\n cookie: false,\r\n redirect: {\r\n callback: '\/callback',\r\n logout: '\/signed-out',\r\n home: false\r\n },\r\n strategies: {\r\n local: {\r\n tokenType: 'JWT',\r\n endpoints: {\r\n login: { url: '\/server\/rest-auth\/login\/', method: 'post', propertyName: 'token' },\r\n user: { url: '\/server\/rest-auth\/user\/', method: 'get', propertyName: '' }\r\n }\r\n },\r\n google: {\r\n client_id: 'YOUR_GOOGLE_CLIENT_ID',\r\n response_type: 'code token',\r\n scope: ['email', 'profile'],\r\n userinfo_endpoint: '\/server\/rest-auth\/user\/'\r\n }\r\n }\r\n }\r\n}<\/pre>\ncallback<\/h4>\n
created() {\r\n const provider = this.$auth.$state.strategy\r\n const callbackParams = queryString.parse(this.$auth.ctx.from.hash)\r\n\r\n this.$axios.post(`\/server\/rest-auth\/${provider}\/`, {\r\n access_token: callbackParams.access_token,\r\n code: callbackParams.code\r\n })\r\n .then((response) => {\r\n const data = response.data\r\n this.$auth.setToken(provider, data.token)\r\n this.$auth.setUser(data.user)\r\n this.$auth.setUserToken(`JWT ${data.token}`)\r\n this.$router.push('\/secure')\r\n })\r\n .catch(() => {\r\n this.$auth.logout()\r\n this.$router.push('\/')\r\n })\r\n}<\/pre>\n\u30ed\u30b0\u30a4\u30f3\u30c6\u30b9\u30c8<\/h4>\n
![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_3.png\")
<\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_4.png\")
<\/p>\n\u767b\u9332\u30da\u30fc\u30b8\u4f5c\u6210<\/h4>\n
![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_5.png\")
<\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_6.png\")
<\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_7.png\")
<\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/06\/django_nuxt_8.png\")
<\/p>\n