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

​

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

1. DingTalk 開発者管理画面にログインします。
2. 作成済みアプリの詳細ページに進み、ベーシック情報ページで、アプリの SuiteKey/SuiteSecret（サードパーティ社内アプリ）または AppKey/AppSecret（社内アプリ） を確認できます。
3. アプリ詳細ページで、開発設定 > 安全設定をクリックし、リダイレクト URL（コールバックドメイン）を入力します。

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

​

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

​

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

​

重要

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

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

​

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

1. ページに DingTalk QRコードログイン JSSDK を導入します。
   <script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>
   
2. QRコードログインを導入したい箇所で、以下のメソッドを呼び出します。
   <!-- 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 言語による記述）：
   // ********************************************************************************
   // 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：アクセス認証情報を取得する

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 を呼び出す