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

前提・実現したいこと

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

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

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

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

該当のソースコード

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,クライアントシークレットを変更しました。

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

行動規範の内容に同意します

回答1件

ベストアンサー

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