获取登录用户的访问凭证

使用钉钉提供的页面登录授权

构造登录授权页面。页面参数如下：

https://login.dingtalk.com/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

成功时跳转到：https://www.aaaaa.com/a/b?authCode=xxxx&state=dddd

失败时跳转到：https://www.aaaaa.com/a/b?error=yyyyyy&state=dddd

内嵌二维码方式登录授权

1. 在页面中引入钉钉扫码登录JSSDK。

   <script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>

2. 在需要引入扫码登录的地方，调用如下方法。

   <!-- 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 方法构造登录二维码，并处理登录成功或失败的回调。
       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参数只用于设置二维码iframe元素的尺寸，并不会影响包裹容器尺寸。
   // 包裹容器的尺寸与样式需要接入方自己使用css设置
   interface IDTLoginFrameParams {
     id: string;      // 必传，包裹容器元素ID，不带'#'
     width?: number;  // 选传，二维码iframe元素宽度，最小280，默认300
     height?: number; // 选传，二维码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;  // 选传，如需生成专属组织专用二维码时，可指定为true，可以限制非组织帐号的扫码
     exclusiveCorpId?: string; // 选传，当exclusiveLogin为true时必传，指定专属组织的corpId
   }
   
   // ********************************************************************************
   // 登录成功后返回的登录结果
   // ********************************************************************************
   interface IDTLoginSuccess {
     redirectUrl: string;   // 登录成功后的重定向地址，接入方可以直接使用该地址进行重定向
     authCode: string;      // 登录成功后获取到的authCode，接入方可直接进行认证，无需跳转页面
     state?: string;        // 登录成功后获取到的state
   }