Google Picker をデスクトップ アプリとモバイルアプリに統合する

このドキュメントでは、Google Picker API を使用して、Google Picker をデスクトップ アプリとモバイルアプリに統合する方法について説明します。

Google Picker API を使用すると、ユーザーが Google ドライブのファイルを選択したり、アップロードしたりできるようになります。ユーザーは、デスクトップ アプリ、モバイルアプリ、ウェブアプリに Google ドライブのデータへのアクセス権を付与できます。これにより、ファイルと安全かつ承認された方法でやり取りできます。

機能

Google Picker には次のような機能があります。

  • Google ドライブの UI と同様のデザインと操作性。
  • ドライブ ファイルのプレビューとサムネイル画像を表示する複数のビュー。
  • 特定のファイルタイプ(PDF や画像など)または特定のフォルダのみを表示する、事前フィルタされたビュー。
  • ユーザーのデフォルト ブラウザの新しいタブで Google Picker にリダイレクトします。Google Picker API をクライアント ページで開くには、代わりに ウェブアプリ用の Google Picker API を使用します。

Google Picker を使用してファイルを選択してアップロードすることはできますが、ユーザーがフォルダ間でファイルを整理、移動、コピーすることはできません。ファイルを管理するには、Google Drive API または ドライブの UI を使用する必要があります。

前提条件

Google Picker を使用するアプリは、既存のすべての利用規約を遵守する必要があります。最も重要なのは、リクエストで自分自身を正しく識別することです。

Google Cloud プロジェクトも必要です。

環境の設定

Google Picker API の使用を開始するには、環境を設定する必要があります。

API を有効にする

Google API を使用する前に、Google Cloud プロジェクトで API を有効にする必要があります。1 つの Google Cloud プロジェクトで 1 つ以上の API を有効にできます。
  • Google Cloud コンソールで、Google Picker API を有効にします。

    API の有効化

認証と権限付与の設定

エンドユーザーを認証してアプリ内のユーザーデータにアクセスするには、1 つ以上の OAuth 2.0 クライアント ID を作成する必要があります。クライアント ID は、Google の OAuth サーバーで個々のアプリを識別するために使用します。アプリが複数のプラットフォームで実行される場合は、プラットフォームごとに個別のクライアント ID を作成する必要があります。

デスクトップ アプリの認証情報を承認する

OAuth 2.0 クライアント ID を作成する手順は次のとおりです。

  1. Google Cloud コンソールで、メニュー > [Google Auth Platform] > [クライアント] に移動します。

    [クライアント] に移動

  2. [クライアントを作成] をクリックします。
  3. [アプリケーション タイプ] > [デスクトップ アプリ] をクリックします。
  4. [名前] フィールドに、認証情報の名前を入力します。この名前は Google Cloud コンソールにのみ表示されます。
  5. [Create] をクリックします。

    新しく作成した認証情報が [OAuth 2.0 クライアント ID] に表示されます。

アプリが以前に付与されたファイルへの承認を取得するには、次の手順を使用する必要があります。

  1. OAuth 2.0 を使用して Google API にアクセスするの手順に沿って、drive.filedrive、または drive.readonly スコープで OAuth 2.0 トークンを取得する必要があります。スコープの詳細については、Google Drive API のスコープを選択するをご覧ください。

  2. OAuth 2.0 トークンを Drive API に渡して、ユーザーが以前にアクセス権を付与したファイルを読み取り、変更します。

モバイルアプリの認証情報を承認する

OAuth 2.0 クライアント ID を作成するには、モバイルアプリの認証情報を承認するの手順に沿って操作します。

ウェブアプリの認証情報を承認する

OAuth 2.0 クライアント ID を作成するには、ウェブアプリの認証情報を承認するの手順に沿って操作します。

Google ピッカーを表示する

デスクトップ アプリとモバイルアプリ向けの Google Picker API は、ユーザーのデフォルト ブラウザの新しいタブ内の Google Picker にリダイレクトします。ユーザーがアクセスを許可して関連ファイルを選択すると、Google Picker はコールバック URL を介して呼び出し元のアプリに戻ります。

  • Google Picker UI の認証画面

    Google Picker をトリガーしてアプリを認証します。

  • Google ログインと権限のダイアログ ボックス

    Google でログインして、リクエストされた権限を付与します。

  • ピッカー内の Google ドライブ ファイル選択インターフェース

    Google ピッカーで Google ドライブのファイルを参照し、目的のアイテムを選択します。

  • [挿入] ボタンが表示されたファイル挿入の確認画面

    選択内容を確認し、[挿入] をタップしてアプリにファイルを追加します。

Google Picker をアプリに統合する

ユーザーが追加のファイルへのアクセス権を付与したり、アプリフローで使用するファイルを選択したりできるようにするには、次の手順を行います。

  1. OAuth 2.0 を使用して Google API にアクセスするの手順に沿って、drive.file スコープへのアクセスをリクエストし、新しいブラウザタブで OAuth 2.0 アクセス ページを開きます。スコープの詳細については、Google Drive API のスコープを選択するをご覧ください。

    これらのアプリに許可されるのは drive.file スコープのみで、他のスコープと組み合わせることはできません。

  2. 新しいブラウザタブの URL では、すべての標準の OAuth クエリ文字列パラメータを使用できます。

    OAuth 2.0 認可 URL リクエストに、URL パラメータ prompttrigger_onepick を追加する必要があります。必要に応じて、他のパラメータを使用して Google Picker をカスタマイズすることもできます。

    パラメータ 説明 ステータス
    prompt=consent ファイル アクセスのプロンプト。 必須
    trigger_onepick=true Google Picker を有効にします。 必須
    allow_multiple=true true の場合、ユーザーは複数のファイルを選択できます。 省略可
    mimetypes=MIMETYPES 検索結果をフィルタする MIME タイプのカンマ区切りのリスト。設定しない場合、すべての MIME タイプのファイルがビューに表示されます。 省略可
    file_ids=FILE_IDS 検索結果をフィルタするファイル ID のカンマ区切りリスト。設定しない場合、すべてのファイルがビューに表示されます。 省略可
    allow_folder_selection=true true の場合、ユーザーがフォルダも選択できるようにします。 省略可

    次のサンプルは、OAuth 2.0 認証 URL リクエストを示しています。

    https://accounts.google.com/o/oauth2/v2/auth? \
    client_id=CLIENT_ID \
    &scope=https://www.googleapis.com/auth/drive.file \
    &redirect_uri=REDIRECT_URI \
    &response_type=code \
    &access_type=offline \
    &prompt=consent \
    &trigger_onepick=true
    

    次のように置き換えます。

    • CLIENT_ID: アプリのクライアント ID。

    • REDIRECT_URI: 認証に成功した後、認証サーバーがユーザーのブラウザをリダイレクトする場所。例: https://www.cymbalgroup.com/oauth2callback

      指定された redirect_uri は、公開 HTTPS URL である必要があります。redirect_uri にカスタム プロトコルまたは localhost URL を使用する場合は、カスタム プロトコルまたは localhost URL にリダイレクトするパブリック HTTPS URL を使用する必要があります。

  3. ユーザーがアクセスを許可して関連ファイルを指定すると、OAuth は、リクエストで指定された redirect_uri にリダイレクトし、次の URL パラメータを追加します。

    • picked_file_ids: ユーザーがアクセスを許可してファイルを選択した場合、選択したファイル ID のカンマ区切りリスト。

    • code: リクエストで設定された response_type パラメータに基づくアクセス トークンまたはアクセスコード。このパラメータには、新しい認可コードが含まれます。

    • scope: リクエストに含まれるスコープ。

    • error: 同意フロー内でユーザーがリクエストをキャンセルした場合、エラーが表示されます。

    次のサンプルは、OAuth 2.0 認証 URL レスポンスを示しています。

    https://REDIRECT_URI?picked_file_ids=PICKED_FILE_IDS&code=CODE&scope=SCOPES
    
  4. アプリは、ステップ 3 の認証コードを新しい OAuth 2.0 トークンと交換する必要があります。詳細については、更新トークンとアクセス トークンの認証コードを交換するをご覧ください。

  5. アプリは、ステップ 3 の URL パラメータのファイル ID とステップ 4 で取得した OAuth 2.0 トークンを使用して、Drive API を呼び出すことができます。詳細については、Google Drive API の概要をご覧ください。

Android アプリで Google ピッカーを使用する

Android モバイルアプリで Google Picker を使用することもできます。

モバイルアプリの認証情報を承認する

Android アプリで Google Picker を使用するには、デスクトップ アプリと同様に、OAuth 2.0 を使用してユーザーを承認する必要があります。Android 認証の詳細については、Google ユーザーデータへのアクセスを承認するをご覧ください。

認証中に Google Picker を表示するには、AuthorizationRequest を作成し、AuthorizationRequest.ResourceParameter オブジェクトの PICKER_OAUTH_TRIGGER リソース パラメータを使用します。

AuthorizationRequest をビルドする場合:

  • drive.file スコープを使用します。

  • setOptOutIncludingGrantedScopestrue に呼び出して、返されるトークンが drive.file スコープのみのものであり、以前に付与されたスコープのものではないことを確認します。

  • AuthorizationRequest.Prompt フィールドを CONSENT に設定すると、以前に同意が得られていた場合でも、ユーザーに同意を求めることができます。

  • 必要に応じて、ビットマップ「OR」(|)演算子を使用して AuthorizationRequest.Prompt フィールドを SELECT_ACCOUNT に設定し、同意プロンプトが表示される前にユーザーがアカウントを選択できるようにすることもできます。

Google Picker を呼び出す

デスクトップ アプリと同様に、いくつかのオプション パラメータを使用して Google Picker をカスタマイズできます。

  • PICKER_ALLOW_MULTIPLE: ユーザーが複数のファイルを選択できるようにします。
  • PICKER_MIMETYPES: 検索結果をフィルタリングする MIME タイプのカンマ区切りリストを受け入れます。設定しない場合、すべての MIME タイプのファイルがビューに表示されます。
  • PICKER_FILE_IDS: 検索結果をフィルタするファイル ID のカンマ区切りリストを受け取ります。設定しない場合、すべてのファイルがビューに表示されます。
  • PICKER_ALLOW_FOLDER_SELECTION: ユーザーがフォルダも選択できるようにします。

パソコン用アプリの省略可能なパラメータの詳細については、Google Picker を表示するをご覧ください。

ユーザーがアクセス権を付与し、関連するファイルを選択すると、AuthorizationResult リソースの getTokenResponseParams オブジェクトが返されます。ユーザーがアクセスを許可した場合、このオブジェクトには picked_file_ids 値(選択したファイル ID のカンマ区切りリスト)が含まれます。