> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# ログインユーザーのアクセス認証情報を取得する

> OAuth 2.0 権限付與によりユーザーの代理としてアクセス認証情報を取得し、DingTalk OpenAPI を呼び出します

アプリがログインユーザーの代理として DingTalk OpenAPI を呼び出してリソースを操作する必要がある場合、本ドキュメントのフローを参考に、API 呼び出し用のアクセス認証情報を取得してください。

<Note>
  社内アプリとサードパーティ社内アプリの実装フローは類似しています。本ドキュメントでは社内アプリの実装フローを例として説明します。
</Note>

## ステップ 1：アプリを作成する

1. [DingTalk 開発者管理画面](https://open-dev.dingtalk.io/#/loginMan)にログインします。

2. 作成済みアプリの詳細ページに進み、**ベーシック情報**ページで、アプリの **SuiteKey/SuiteSecret（サードパーティ社内アプリ）または AppKey/AppSecret（社内アプリ）** を確認できます。

3. アプリ詳細ページで、**開発設定** > **安全設定**をクリックし、リダイレクト URL（コールバックドメイン）を入力します。

   > リダイレクト URL は、ログイン権限付与後にリダイレクトされる予定のアドレスです。

## ステップ 2：OAuth ログイン権限付与

ユーザーの代理として DingTalk OpenAPI でリソースの読み取り・書き込みを行う場合、OAuth 2.0 権限付与フローで権限付与を完了する必要があります。OAuth 2.0 権限付与のフローは以下のとおりです。

### DingTalk が提供するページを使用したログイン権限付与

ログイン権限付与ページを構築します。ページのパラメータは以下のとおりです。

### 重要

* 読みやすさのため、以下のパラメータ例は改行されています。通常はパラメータを改行する必要はありません。
* パラメータの value は urlencode する必要があります。以下の例は urlencode 済みです。

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
https://login.dingtalk.io/oauth2/auth?
redirect_uri=https%3A%2F%2Fwww.aaaaa.com%2Fa%2Fb
&response_type=code
&client_id=dingbbbbbbb
&scope=openid corpid
&state=dddd
&prompt=consent
```

| パラメータ           | 必須  | 説明                                                                                                                                                                                                                 |
| --------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| redirect\_uri   | はい  | 権限付与の承認 / 拒否後のコールバック URL。 **重要** アプリ新規登録時に登録したドメインと一致する必要があります。                                                                                                                                                    |
| response\_type  | はい  | 固定値は code。 権限付与の承認後に authCode が返されます。                                                                                                                                                                              |
| client\_id      | はい  | ステップ 1 で作成したアプリの詳細から取得します。 - 社内アプリ：client\_id はアプリの AppKey です。 - サードパーティ社内アプリ：client\_id はアプリの SuiteKey です。                                                                                                        |
| scope           | はい  | 権限付与の範囲。権限付与ページに表示される権限情報は、アプリ新規登録時に設定したものに基づきます。 現在、以下の 2 種類の入力のみサポートしています： - **openid**：権限付与後にユーザーの userid を取得できます。 - **openid** corpid：権限付与後にユーザー ID と、ログイン中にユーザーが選択した組織 ID を取得できます。スペース区切り。URL エンコードに注意してください。 |
| prompt          | はい  | 値が consent の場合、権限付与確認ページに進みます。                                                                                                                                                                                     |
| state           | いいえ | authCode に同伴してそのまま返されます。                                                                                                                                                                                           |
| org\_type       | いいえ | 特定のタイプの組織リストを出力するよう制御します。org\_type=management は管理権限を持つ組織のみを出力することを意味します。 **重要** scope に corpid が含まれる場合に意味を持つパラメータです。                                                                                               |
| corpId          | いいえ | ユーザーが選択する必要のある組織を指定します。 **重要** - scope に corpid が含まれる場合に意味を持つパラメータです。 - 渡す corpId は、現在のユーザーが所属する組織である必要があります。                                                                                                      |
| exclusiveLogin  | いいえ | true の場合は専属アカウントログインを示し、組織コード入力ページを表示します。                                                                                                                                                                          |
| exclusiveCorpId | いいえ | 専属アカウント機能をオンにした組織の corpId。 **重要** exclusiveLogin が true の場合に意味を持つパラメータで、 該当組織のログインページに直接遷移することを意味します。                                                                                                              |

成功時のリダイレクト先：[https://www.aaaaa.com/a/b?authCode=xxxx\&state=dddd](https://www.aaaaa.com/a/b?authCode=xxxx\&state=dddd)

失敗時のリダイレクト先：[https://www.aaaaa.com/a/b?error=yyyyyy\&state=dddd](https://www.aaaaa.com/a/b?error=yyyyyy\&state=dddd)

### QRコードを埋め込んでログイン権限付与

<Warning>
  QRコードを埋め込むページは、redirect\_uri パラメータで指定されたページと「同一オリジン」である必要があります。そうでない場合、QRコードを読み取っても反応しません。「同一オリジン」とは、プロトコル、第 2 または第 3 レベルのドメイン、ポート番号が同じであることを指します。詳細については、ドキュメント [ブラウザの同一オリジンポリシー](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy) を参照してください。
</Warning>

1. ページに DingTalk QRコードログイン JSSDK を導入します。

   ```xml theme={"theme":{"light":"github-light","dark":"github-dark"}}
   <script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>
   ```
2. QRコードログインを導入したい箇所で、以下のメソッドを呼び出します。

   ```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
   <!-- STEP1：HTMLにラッパーコンテナ要素を追加 -->
   <div id="self_defined_element" class="self-defined-classname"></div>
   <style>
       /* STEP2：ラッパーコンテナ要素のCSSスタイルを指定。特に幅と高さの設定に注意 */
       .self-defined-classname {
           width: 300px;
           height: 300px;
       }
   </style>
   <script>
       // STEP3：必要なタイミングで、window.DTFrameLogin メソッドを呼び出してログインQRコードを構築し、ログイン成功または失敗のコールバックを処理する。
       window.DTFrameLogin(
           {
               id: 'self_defined_element',
               width: 300,
               height: 300,
           },
           {
               redirect_uri: encodeURIComponent('http://www.aaaaa.com/a/b/'),
               client_id: 'dingxxxxxxxxxxxx',
               scope: 'openid',
               response_type: 'code',
               state: 'xxxxxxxxx',
               prompt: 'consent',
           },
           (loginResult) => {
               const {redirectUrl, authCode, state} = loginResult;
               // ここで直接リダイレクトできる
               window.location.href = redirectUrl;
               // ページを遷移せずに、codeを使用して認証することも可能
               console.log(authCode);
           },
           (errorMsg) => {
               // ここでは通常、ログイン失敗の具体的な原因を表示する必要がある
               alert(`Login Error: ${errorMsg}`);
           },
       );
   </script>
   ```

   パラメータ説明（TypeScript 言語による記述）：

   ```typescript theme={"theme":{"light":"github-light","dark":"github-dark"}}
   // ********************************************************************************
   // window.DTFrameLogin メソッド定義
   // ********************************************************************************
   window.DTFrameLogin: (
     frameParams: IDTLoginFrameParams, // DOMラッパーコンテナ関連パラメータ
     loginParams: IDTLoginLoginParams, // 統一ログインパラメータ
     successCbk: (result: IDTLoginSuccess) => void, // ログイン成功後のコールバック関数
     errorCbk?: (errorMsg: string) => void,         // ログイン失敗後のコールバック関数
   ) => void;

   // ********************************************************************************
   // DOMラッパーコンテナ関連パラメータ
   // ********************************************************************************
   // 注意！widthとheightパラメータはQRコードiframe要素のサイズ設定のみに使用され、ラッパーコンテナのサイズには影響しない。
   // ラッパーコンテナのサイズとスタイルは、接続側が自分でcssを使って設定する必要がある
   interface IDTLoginFrameParams {
     id: string;      // 必須、ラッパーコンテナ要素ID、'#'は含めない
     width?: number;  // 任意、QRコードiframe要素の幅、最小280、デフォルト300
     height?: number; // 任意、QRコードiframe要素の高さ、最小280、デフォルト300
   }

   // ********************************************************************************
   // 統一ログインパラメータ
   // ********************************************************************************
   // パラメータの意味は「リンク連結によるログイン権限付与」の接続方式と完全に同じ（一部パラメータは欠落）
   // 実行環境を設定するためのisPreパラメータを追加
   interface IDTLoginLoginParams {
     redirect_uri: string;     // 必須、urlはencodeが必要
     response_type: string;    // 必須、値はcodeに固定
     client_id: string;        // 必須
     scope: string;            // 必須、値がopenid+corpidの場合、下記のorg_typeとcorpIdパラメータが必須、そうでないとログインに成功しない
     prompt: string;           // 必須、値はconsent。
     state?: string;           // 任意
     org_type?: string;        // 任意、scope値がopenid+corpidの場合は必須
     corpId?: string;          // 任意、scope値がopenid+corpidの場合は必須
     exclusiveLogin?: string;  // 任意、専属組織専用QRコードを生成する場合、trueに指定可能。組織アカウント以外の読み取りを制限できる
     exclusiveCorpId?: string; // 任意、exclusiveLoginがtrueの場合は必須、専属組織のcorpIdを指定
   }

   // ********************************************************************************
   // ログイン成功後に返されるログイン結果
   // ********************************************************************************
   interface IDTLoginSuccess {
     redirectUrl: string;   // ログイン成功後のリダイレクトアドレス。接続側はこのアドレスを直接使ってリダイレクト可能
     authCode: string;      // ログイン成功後に取得したauthCode。接続側は直接認証可能、ページ遷移は不要
     state?: string;        // ログイン成功後に取得したstate
   }
   ```

## ステップ 3：アクセス認証情報を取得する

返された auth\_code とアプリの情報を使用し、[ユーザートークンを取得](/ja/open/development/obtain-user-token)インターフェースを呼び出して access\_token を取得します。

サンプルコード：

```http theme={"theme":{"light":"github-light","dark":"github-dark"}}
POST /v1.0/oauth2/userAccessToken HTTP/1.1
Host:api.dingtalk.io
x-acs-dingtalk-access-token:BE3xxxx
Content-Type:application/json

{
  "clientId" : "dingxxx",
  "clientSecret" : "1234",
  "code" : "abcd",
  "refreshToken" : "abcd",
  "grantType" : "authorization_code"
}
```

## ステップ 4：アクセス認証情報を使って API を呼び出す

access\_token を取得した後、この認証情報を使用して [ユーザー連絡先のプロフィールを取得](/ja/open/development/dingtalk-retrieve-user-information)インターフェースを呼び出すことができます。