Help us understand the problem. What is going on with this article?

Node.jsのOAuthを使ってGoogleDriveAPIを叩いてみた

More than 5 years have passed since last update.

はじめに

最近何かとFacebookのタイムライン等でGoogleI/O 2015が話題になっており、今後InboxのようにGooglePlatformから関連サービスを生み出す開発の方が増えてくるのではないかと思ったので、今回はNode.jsをつかって、簡単にGoogleDriveAPIを叩くアプリケーションを作ってみようとおもいます。

参照源

今回はこちらのドキュメントに従って開発をしています。

STEP1.Google Developers Consoleでプロジェクトの作成

「APIと認証」から、GoogleDriveAPIを有効化

Screen Shot 0027-05-30 at 5.28.04 PM.png

  • 作成したプロジェクトを選択し、APIの認証をおこないます
  • 左カラムのAPIを選択

Screen Shot 0027-05-30 at 5.19.06 PM.png

  • google Drive API を選択し、「APIを有効にする」を選択 Screen Shot 0027-05-30 at 4.51.20 PM.png

クライアントIDの作成

有効にしたAPIのクライアントIDを作成します。
* 認証情報を選択
Screen Shot 0027-05-30 at 4.52.29 PM.png
* 「インストールされているアプリケーション」を選択して作成
* アプリ名を任意のタイトルで入力して同意画面を作成してください
Screen Shot 0027-05-30 at 4.52.39 PM.png

  • 同意画面の設定が完了したら、クライアントIDの作成を行います。
  • 「インストールされているアプリケーション」の「その他」を選択し、クライアントIDを生成
    Screen Shot 0027-05-30 at 4.53.29 PM.png

  • プロジェクトのTOPページで以下の項目が作成されていばOK

    • クライアントID
    • クライアントシークレット
    • リダイレクトURL

Screen Shot 0027-05-30 at 5.25.24 PM.png

STEP2.Node.jsでアプリケーションを作成

次に、Node.jsでAPIを叩くアプリケーションを作成していきます。
基本的なNode.jsのインストールやnpmに関してはこちらを参照すると良いかと思います。
いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (1/2)

npmでgoogleAPIをインストール

プロジェクトディレクトリを作成したらnpmで以下のコマンドを実行

% npm install googleapis --save                                                                                                              

npm WARN deprecated jws@0.0.2: Security update: Versions below 3.0.0 are deprecated.
npm WARN deprecated tap-consumer@0.0.1: This module is not supported. Please use 'tap' instead.
npm WARN installMany tap-consumer was bundled with tap@0.3.3, but bundled package wasn't found in unpacked tree
npm WARN deprecated tap-results@0.0.2: This module is not supported. Please use 'tap' instead.
googleapis@2.0.4 node_modules/googleapis
├── string-template@0.2.1
├── async@0.9.2
├── request@2.54.0 (caseless@0.9.0, aws-sign2@0.5.0, forever-agent@0.6.1, form-data@0.2.0, stringstream@0.0.4, oauth-sign@0.6.0, tunnel-agent@0.4.0, isstream@0.1.2, json-stringify-safe@5.0.1, node-uuid@1.4.3, qs@2.4.2, combined-stream@0.0.7, mime-types@2.0.12, http-signature@0.10.1, bl@0.9.4, tough-cookie@1.2.0, hawk@2.3.1, har-validator@1.7.1)
├── gapitoken@0.1.4 (jws@0.0.2)
└── google-auth-library@0.9.6 (lodash.noop@3.0.0, jws@3.0.0, request@2.51.0, gtoken@1.1.1)

% ls node_modules/googleapis

CONTRIBUTING.md COPYING         MIGRATING.md    README.md       apis            jsdoc-conf.json lib             node_modules    package.json    scripts         templates

node_module以下にgoogleapisが保存されていることを確認して下さい。

qucikstart.jsの作成

  • 公式リファレンスに従い、プロジェクトディレクトリ直下に以下のファイルを作成
  • ここで、STEP1で作成したクライアントID、クライアントシークレット、リダイレクトURLを入力してください。
quickstart.js
var readline = require('readline');
var google = require('googleapis');
var OAuth2 = google.auth.OAuth2;

var CLIENT_ID = 'YOUR CLIENT ID HERE',
    CLIENT_SECRET = 'YOUR CLIENT SECRET HERE',
    REDIRECT_URL = 'YOUR REDIRECT URL HERE',
    SCOPE = 'https://www.googleapis.com/auth/drive.file';

var rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

var auth = new OAuth2(CLIENT_ID, CLIENT_SECRET, REDIRECT_URL);

var url = auth.generateAuthUrl({ scope: SCOPE });
var getAccessToken = function(code) {
  auth.getToken(code, function(err, tokens) {
    if (err) {
      console.log('Error while trying to retrieve access token', err);
      return;
    }
    auth.credentials = tokens;
    upload();
  });
};
var upload = function() {
  var drive = google.drive({ version: 'v2', auth: auth });
  drive.files.insert({
    resource: {
      title: 'My Document',
      mimeType: 'text/plain'
    },
    media: {
      mimeType: 'text/plain',
      body: 'Hello World!'
    }
}, console.log);
};
console.log('Visit the url: ', url);
rl.question('Enter the code here:', getAccessToken);

STEP3.実際にAPIを叩く

認証コードの発行

  • nodeで作成したquickstart.jsを実行します
% node quickstart.js
Visit the url:  https://accounts.google.com/o/oauth2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.file&response_type=code&client_id=275817081938-98r3p3mmik51sfaism7od7pjp0r2g02j.apps.googleusercontent.com&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob
Enter the code here:

  • 発行されたURLにアクセスし、認証コードを取得
  • Webブラウザでアクセスをすると、STEP1.で設定した「同意画面」が表示されます
    Screen Shot 0027-05-30 at 5.10.49 PM.png

  • 同意すると、「認証コード」が発行されるので、コピーしましょう

Screen Shot 0027-05-30 at 5.10.54 PM.png

アクセストークンの発行とAPIへのアクセス

  • コマンドラインに戻り、取得した認証コードをペーストしてエンター
% node quickstart.js
Visit the url:  https://accounts.google.com/o/oauth2/auth?scope=...
Enter the code here:
null { kind: 'drive#file',
  id: '0B5vaUuhAA1KpaW1tZVNVOU5jYXM',
  etag: '"AmpO9uzbs3m4f4SIcYKV4LhQRzY/MTQzMjk3NjU2NjkwNA"',
  selfLink: 'https://www.googleapis.com/drive/v2/files/0B5vaUuhAA1KpaW1tZVNVOU5jYXM',
  webContentLink: 'https://docs.google.com/uc?id=0B5vaUuhAA1KpaW1tZVNVOU5jYXM&export=download',
  alternateLink: 'https://docs.google.com/file/d/0B5vaUuhAA1KpaW1tZVNVOU5jYXM/edit?usp=drivesdk',
  iconLink: 'https://ssl.gstatic.com/docs/doclist/images/icon_10_text_list.png',
  title: 'My Document',
  mimeType: 'text/plain',
  labels:
   { starred: false,
     hidden: false,
     trashed: false,
     restricted: false,
     viewed: true },
  createdDate: '2015-05-30T09:02:47.087Z',
  modifiedDate: '2015-05-30T09:02:46.904Z',
  modifiedByMeDate: '2015-05-30T09:02:46.904Z',
  lastViewedByMeDate: '2015-05-30T09:02:46.904Z',
  markedViewedByMeDate: '1970-01-01T00:00:00.000Z',
  version: '526254',

生成されたファイルを確認

  • GoogleDriveにアクセスしてみましょう。
  • 「My Document」というファイルが作成されていて「Hello World」が表示されていれば、成功です。

Screen Shot 0027-05-30 at 5.15.28 PM.png

終わりに

今回作成したレポジトリ

今回やってみたものを公開しています。

  • gdrive_api
    • 該当のgoogleのプロジェクトは既に削除したため、IDやSECLET情報はご利用出来ません(.gitignoreし忘れてました)
    • 公式にそって編集しているだけなシンプルなものです
    • 今後もっと様々な機能を実装してみたい

OAuth周りのプラクティス

  1. 認証コードのリクエスト
  2. アクセストークンのリクエスト
  3. APIの活用

という今回のようなOAuthを活用したAPIの問い合わせの流れというのは様々なAPIでも同様のフローだと思います。
以下のOAuth2.0に関するGoogleの公式等にも丁寧に記載がありますが、これらを参照しOAuthの流れを理解し様々なAPIを活用できるようにしていけると良いかもしれないです。

maximum80
株式会社ギブリー 取締役 COO兼CHO エンジニアの成長支援事業を展開してます。公開している内容は弊社で取り組んでいるハッカソン等で活用するためにメモしているものがメインです。
http://maximum80.me/
givery
Giveryは社会を豊かにする人々のための成長エコシステムを創造する「成長」支援企業です。ITとリアルの両軸で事業を展開し、お客様・ユーザーの皆様・社員・社会の成長を全力で応援します。
https://givery.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした