忘備録

日々の調べ物をまとめる。アウトプットする。基本自分用。

MeteorやっててClient IDの取得でハマった

JavaScript Meteor

環境

Meteor: 1.2.1

前提

Googleアカウントを持っていること

accounts-googleの実装

MeteorでGoogleのOAuthによるログインを実装するのはすごく簡単で、
以下の通りパッケージを追加して、コードを一行差し込むだけでできてしまう。

パッケージ追加

meteor add accounts-google accounts-ui

sample.html

<head>
  <title>test-meteor-pja</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> loginButtons}}  <!-- add -->

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

アクセスするとご覧の通り

f:id:mktktmr:20160212231237p:plain

ただ、client IDの登録でハマります。

私のようなイングリッシュがプアな人間は特に。

ログインボタンを実装後、クリックするとClient IDの登録手順が示されるんですが、これが古いもののためのなのか、書いてあることと実際の画面が全然異なるのである。

f:id:mktktmr:20160212085747p:plain

というわけで、OAuth認証ができるようになるまでを説明していく。

1. Google Developers Consoleへアクセス

まずは「Google Developers Console」にアクセスする

https://console.developers.google.com/

f:id:mktktmr:20160212074024p:plain

2. プロジェクトの作成

はじめてGoogle Developers Consoleを利用する人はプロジェクトがないはずなので「Create project」からプロジェクトを作成する

f:id:mktktmr:20160210135939p:plain

f:id:mktktmr:20160210135942p:plain

3. OAuth consentの設定

プロジェクトが作成できたら、ダッシュボードがひらくので、 左上にあるハンバーガーアイコンをクリックし、メニューを開く

f:id:mktktmr:20160210135945p:plain

メニューのなかに「API Manager」という項目があるので選択する

f:id:mktktmr:20160210135949p:plain

API Managerページのメニューのなかに「Credentials」があるので選択し、開かれたページのタブのなかの「OAuth consent screen」を選択する f:id:mktktmr:20160210135953p:plain

メールアドレスとProduct nameを入力し、「save」ボタンをクリック

f:id:mktktmr:20160212234056p:plain

4. Credentialの作成

次に「Credentials」タブを選択し、「New Credentials」ボタンを押下する

f:id:mktktmr:20160210140000p:plain

すると、プルダウンが開き、そのなかに「OAuth Client ID」があるので選択する。

f:id:mktktmr:20160210140004p:plain

  1. Application type
    Web applicationを選択

  2. Name
    任意の名前を入力

  3. Authorized JavaScript origins
    http://localhost:3000

  4. Authorized redirect URIs
    http://localhost:3000/_oauth/google

以上を入力し、「Create」ボタンをクリック

f:id:mktktmr:20160212232948p:plain

すると「client ID」と「client secret」が発行される

f:id:mktktmr:20160210140031p:plain

5. 「client ID」および「client secret」の登録

手順４で発行された「client ID」および「client secret」をMeteorアプリケーションのOAuth設定のフォームに入力し、「Save Configration」をクリックする

f:id:mktktmr:20160212085252p:plain

↓のようになればおk

f:id:mktktmr:20160212233625p:plain