質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.68%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

OAuth

OAuth(Open Authorization)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Q&A

解決済

1回答

8089閲覧

GoogleAPIログイン認証機能を実装したい。承認エラー(エラー 401: invalid_client The OAuth client was not found.)が発生しました。

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

OAuth

OAuth(Open Authorization)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

0グッド

0クリップ

投稿2020/10/15 10:24

編集2020/10/15 13:22

前提・実現したいこと

自由自在さんのサイトを参考にしながら、Webアプリケーションを作成しています。
ログイン画面を表示させたいと思っています。

発生している問題・エラーメッセージ

『Vueでログイン管理(OAuth2)』(https://pragmatic.ukiuni.com/vue_oauth/)を見ながら、
ログイン画面を作成しているのですが、下記の画像のエラーが発生してしまいました。

![イメージ説明

2周ほど、記事のコードと照らし合わせて確認しましたが、誤りはないように思います。

該当のソースコード

src/front/components/Login.vue

<template> <div> <a href="" @click="moveToGoogleOAuth()" >Google でログイン</a> </div> </template> <script lang="ts"> import Vue from "vue" import axios from "axios" export default Vue.extend({ methods: { async moveToGoogleOAuth(){ const response = await axios.get("/api/login/google/loginPath"); window.location.href = response.data.url } } }); </script>

src/backend/controllers/login.ts

import express, { Router } from 'express' import qs from 'querystring'; import axios from 'axios'; var router: Router = express.Router(); const client_id = process.env.GOOGLE_OAUTH_CLIENT_ID || '{Google からコピーしたクライアントID}' const client_secret = process.env.GOOGLE_OAUTH_CLIENT_SECRET || '{Google からコピーしたクライアントシークレット}' const redirect_uri_postfix = '/oauthRedirect/google' const response_type = 'code' const scope = 'email' const GOOGLE_URL_AUTH = 'https://accounts.google.com/o/oauth2/v2/auth' const GOOGLE_URL_TOKEN = 'https://www.googleapis.com/oauth2/v4/token' const GOOGLE_URL_USERINFO = 'https://www.googleapis.com/oauth2/v3/userinfo' router.get('/google/loginPath', function (req, res) { var redirect_uri = req.protocol + "://" + req.get("Host") + redirect_uri_postfix; const params = qs.stringify({ client_id, redirect_uri, response_type, scope, }) res.send({ url: `${GOOGLE_URL_AUTH}?${params}` }) }); router.post('/google/loginPath', async function (req, res) { try { var params = new URLSearchParams(); params.append('client_id', client_id); params.append('client_secret', client_secret); params.append('code', req.body.code); params.append('grant_type', 'authorization_code'); params.append('redirect_uri', req.body.redirect_uri); const response = await axios.post(GOOGLE_URL_TOKEN, params) const access_token = response.data.access_token; const userInfoResponse = await axios.get(GOOGLE_URL_USERINFO, { headers: { 'Authorization': `Bearer ${access_token}`, } }); const userInfo = userInfoResponse.data; res.send({ access_token, userInfo }); } catch(e) { res.status(400).send(); } }); export default router;

src/backend/index.ts

import express from 'express' import messageController from './controllers/message' import enqueteController from './controllers/enquete' import loginController from './controllers/login' import {createConnection} from 'typeorm' import Enquete from './models/Enquete' const app: express.Express = express() // 追加 サーバの強化追加 app.use(express.json()) app.use(express.urlencoded({ extended: true })) // 追加終了 // 追加 処理の外だし app.use("/messages", messageController) app.use("/api/enquetes", enqueteController) app.use("/api/login", loginController) app.use("/", express.static(__dirname + "/public")) app.use("*", (req, res) => { res.status(200).sendFile(__dirname + "/public/index.html"); }); // 追加終了 !async function initialize(){ await createConnection({ type: "postgres", url: process.env.DATABASE_URL || "postgres://postgres:postgres@localhost:5432/postgres", synchronize: true, entities: [ Enquete, ], extra: { ssl: (!!process.env.DATABASE_SSL) ? { rejectUnauthorized: false, } : false, } }); // 3000番ポートでAPIサーバ起動 const port = process.env.PORT || 3000; app.listen(port, () => { console.log("ポート" + port + "番で起動したよ〜!") }) }()

src/front/components/RedirectedFromGoogle.vue

<template> <div>{{message}}</div> </template> <script lang="ts"> import Vue from "vue" import axios from "axios" export default Vue.extend({ data() { return { message: "" } }, async created() { const code = this.$route.query.code; const redirect_uri = window.location.href.split("?")[0]; try { const response = await axios.post("/api/login/google/loginPath", { code, redirect_uri }); const authInfo = response.data; if(authInfo.access_token){ Vue.prototype.$loginInfo = { oAhtuProvider: "google", accessToken: authInfo.access_token } this.$router.push("/enquete/list") return; } } catch(throughtToNext) { } this.message = "Googleでのログイン検証に失敗しました!再度やり直してください。" setTimeout(()=>{ this.$router.push("/login") }, 5000); } }); </script>

src/front/components/App.vue

<template> <div> <router-view /> </div> </template> <script lang="ts"> import Vue from "vue"; import VueRouter from "vue-router"; import Enquete from "./PostEnquete.vue"; // Postを追加 import EnqueteResultList from "./EnqueteResultList.vue"; import Login from "./Login.vue"; import RedirectedFromGoogle from "./RedirectedFromGoogle.vue"; const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/', component: Enquete }, { path: '/enquete/list', component: EnqueteResultList }, { path: '/login', component:Login }, { path: '/oauthRedirect/google', component: RedirectedFromGoogle } ] }) Vue.use(VueRouter); export default Vue.extend({ router }); </script>

src/backend/controllers/enquete.ts

import express, { Router } from 'express' import { getRepository } from 'typeorm' import Enquete from '../models/Enquete' import axios from 'axios' const GOOGLE_URL_USERINFO = 'https://www.googleapis.com/oauth2/v3/userinfo' const ADMIN_MAIL = "Google Accountのメールアドレス" var router: Router = express.Router(); router.post('/', async function(req, res) { const enquete = req.body; const EnqueteRepository = getRepository(Enquete); await EnqueteRepository.save(enquete); res.send(enquete); }); router.get('/', async function (req, res) { const userInfoResponse = await axios.get(GOOGLE_URL_USERINFO, { headers: { 'Authorization': `Bearer ${req.header("Authorization")}`, } }); if (ADMIN_MAIL != userInfoResponse.data.email) { res.status(401).send() return; } const EnqueteRepository = getRepository(Enquete); const enquetes = await EnqueteRepository.find(); res.send(enquetes); }); export default router;

試したこと

src/backend/controllers/enquete.ts
const ADMIN_MAIL = "Google Accountのメールアドレス"

src/backend/controllers/login.ts
const client_id = process.env.GOOGLE_OAUTH_CLIENT_ID || '{Google からコピーしたクライアントID}'
const client_secret = process.env.GOOGLE_OAUTH_CLIENT_SECRET || '{Google からコピーしたクライアントシークレット}'

に自身のメールアドレス、クライアントID,クライアントシークレットを変更しました。

よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

回答1

0

ベストアンサー

src/backend/controllers/login.ts

import express, { Router } from 'express' import qs from 'querystring'; import axios from 'axios'; var router: Router = express.Router(); const client_id = process.env.GOOGLE_OAUTH_CLIENT_ID || '{Google からコピーしたクライアントID}' const client_secret = process.env.GOOGLE_OAUTH_CLIENT_SECRET || '{Google からコピーしたクライアントシークレット}' const redirect_uri_postfix = '/oauthRedirect/google' const response_type = 'code' const scope = 'email' const GOOGLE_URL_AUTH = 'https://accounts.google.com/o/oauth2/v2/auth' const GOOGLE_URL_TOKEN = 'https://www.googleapis.com/oauth2/v4/token' const GOOGLE_URL_USERINFO = 'https://www.googleapis.com/oauth2/v3/userinfo' router.get('/google/loginPath', function (req, res) { var redirect_uri = req.protocol + "://" + req.get("Host") + redirect_uri_postfix; const params = qs.stringify({ client_id, redirect_uri, response_type, scope, }) res.send({ url: `${GOOGLE_URL_AUTH}?${params}` }) }); router.post('/google/loginPath', async function (req, res) { try { var params = new URLSearchParams(); params.append('client_id', client_id); params.append('client_secret', client_secret); params.append('code', req.body.code); params.append('grant_type', 'authorization_code'); params.append('redirect_uri', req.body.redirect_uri); const response = await axios.post(GOOGLE_URL_TOKEN, params) const access_token = response.data.access_token; const userInfoResponse = await axios.get(GOOGLE_URL_USERINFO, { headers: { 'Authorization': `Bearer ${access_token}`, } }); const userInfo = userInfoResponse.data; res.send({ access_token, userInfo }); } catch(e) { res.status(400).send(); } }); export default router;

にて、

const client_id = process.env.GOOGLE_OAUTH_CLIENT_ID || '{Google からコピーしたクライアントID}' const client_secret = process.env.GOOGLE_OAUTH_CLIENT_SECRET || '{Google からコピーしたクライアントシークレット}'

部分の、{}を削除したらエラー解消できました!

投稿2020/10/16 04:46

退会済みユーザー

退会済みユーザー

総合スコア0

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.68%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

OAuth

OAuth(Open Authorization)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。