钉钉公司內部H5微运用开发设计详解

日期:2021-02-22 类型:科技新闻 

关键词:在线小程序开发,微信小程序怎么做店铺,小程序logo设计,小程序平台,小程序码生成

公司內部H5微运用开发设计 分成 服务端API和前端开发API的开发设计,关键涉及到到进到运用免登步骤和JSAPI鉴权。

JSAPI鉴权开发设计流程:

1、建立H5微运用

登入钉钉对外开放服务平台(https://open-dev.dingtalk.com/),进到“运用开发设计”->公司內部开发设计H5微运用->建立运用,并填写基础信息内容和配备开发设计信息内容

2、JSAPI鉴权服务端API的开发设计:

(1)根据appKey 和 appSecret 获得启用插口凭据AccessToken(https://oapi.dingtalk.com/gettoken?appkey=appKey&appsecret=appSecret)

(2)根据AccessToken 获得用于JSAPI的临时性单据Ticket(https://oapi.dingtalk.com/get_jsapi_ticket?access_token=ACCESS_TOKEN)

(3)ticket(JSAPI的临时性单据),nonceStr(任意串),timeStamp(時间戳),url(当今网页页面的URL,不包括#及其后边一部分)测算签字信息内容

测算签字主要参数

/*
     *ticket(JSAPI的临时性单据),nonceStr(任意串),timeStamp(時间戳),url(当今网页页面的URL,不包括#及其后边一部分)测算签字信息内容
     * */
    public static function sign($ticket, $nonceStr, $timeStamp, $url)
    {
        $plain = 'jsapi_ticket=' . $ticket .
            '&noncestr=' . $nonceStr .
            '&timestamp=' . $timeStamp .
            '&url=' . $url;
        return sha1($plain);
    }

(4)根据AccessToken 获得用于JSAPI的临时性单据Ticket(表明:因为会牵涉到好几个公司,公司的appKey 和 appSecret的1些信息内容全是写在JSON配备文档中,前端开发传公司ID到服务端,服务端就会从JSON配备文档中获得公司信息内容)

/*
     * 依据公司ID corpid 回到 JSAPI 鉴权配备信息内容
     * */
    public static function getConfig($corpid)
    {
        $_config = self::getApiConfig($corpid);
        $appkey = $_config["AppKey"];
        $appsecret = $_config["AppSecret"];
        $agentid = $_config["AgentId"];
        $nonceStr = 'flywong';
        $timeStamp = time();
        //$url = self::getCurrentUrl();
        $url = $_config["AppUrl"];
        
        $accessToken = self::getAccessToken($appkey,$appsecret);
        $ticket = self::getTicket($accessToken);
        $signature = self::sign($ticket, $nonceStr, $timeStamp, $url);
        
        $config = array(
            'agentId' => $agentid,
            'corpId' => $corpid,
            'timeStamp' => $timeStamp,
            'nonceStr' => $nonceStr,
            'signature' => $signature,
            'url' => $url,
            'type'=>0
        );
        return json_encode($config, JSON_UNESCAPED_SLASHES);
    }
/*
     * 依据公司ID corpid 从api_config.json配备文档中寻找 公司对应的信息内容,并回到公司运用开发设计信息内容
     * */
    public static function getApiConfig($corpid)
    {
         $json_string = file_get_contents(__DIR__ .'/../api_config.json');   //从文档中载入数据信息到PHP自变量
         $arrs = json_decode($json_string, true); 
         foreach($arrs as $key => $value)
         {
             if($value["CorpId"] == $corpid)
             {
                 return $value;
             }
         }
    }

公司的配备文档api_config.json

3、JSAPI鉴权前端开发API的开发设计:

前端开发推送GET恳求获得服务端JSAPI 鉴权配备信息内容

// 多线程获得dd.config
  async getDDConfig({commit, state},callback) {
    // 推送多线程ajax恳求
    const result = await reqDDConfig(state.CorpId)
    // 递交1个mutation
    const ddconfig = result
    ddconfig.jsApiList= state.jsApiList 
  dd.config(ddconfig); 
  commit(RECEIVE_DDCONFIG, {ddconfig}) 

  // 数据信息升级了, 通告1下组件 
  callback && callback() 
}
let that = this;
      //获得 JSAPI 鉴权配备信息内容
      that.$store.dispatch('getDDConfig', () => {//
        that.$nextTick(() => {// 数据信息ddconfig state 升级后实行
          that.$store.dispatch('getUserinfo')//获得登入客户信息内容
          that.$store.dispatch('getGeolocation')//获得地形图精准定位信息内容
        })
      })
/* 情况管理方法*/
export default {
  CorpId:'dingb0bd5c5a3ba53e1231232378f',//公司ID
  ddconfig:{},//钉钉签权配备信息内容
  jsApiList:[
    'runtime.info',
    'biz.contact.choose',
    'device.notification.confirm',
    'device.notification.alert',
    'device.notification.prompt',
    'biz.ding.post',
    'biz.util.openLink',
    'device.geolocation.get',
    'biz.util.scanCard'
  ],//必须签权的JSAPI
  userinfo:{}, //客户信息内容
  geolocation:{} //地形图精准定位信息内容
}

4、H5微运用的免登

“免登”是指客户进到运用后,不用键入钉钉客户名和登陆密码,运用程序流程可全自动获得当今客户身份,进而登陆系统软件的步骤。

1、前端开发去获得微运用免登受权码,随后把受权码推送到服务端api获得当今客户信息内容

// 多线程获得userinfo
  getUserinfo({commit, state}) {
    dd.runtime.permission.requestAuthCode({
      corpId: state.CorpId, // 公司id
      onSuccess: async function (info) {
        let code = info.code // 根据该免登受权码能够获得客户身份
        // 推送多线程ajax恳求
        const result = await reqUserinfo(code,state.CorpId)
        // 递交1个mutation
        const userinfo = result
        commit(RECEIVE_USERINFO, {userinfo})
      }
    })
  }

2、服务端API获得客户信息内容

/*
     * 根据免登受权码code和access_token获得客户的userid
     * */
    public static function getUserInfo($accessToken, $code)
    {
        $response = \util\Http::get("/user/getuserinfo",array("access_token" => $accessToken, "code" => $code));
        $userinfo = json_decode(json_encode($response),true);
        $userid = $userinfo["userid"];
        return self::getuser($accessToken,$userid);
    }
    /*
     * 根据access_token 和 userid 获得客户详细信息
     * */
    private static function getuser($accessToken,$userid)
    {
        $response = \util\Http::get("/user/get",array("access_token" => $accessToken, "userid" => $userid));
        return json_encode($response);
    }

提示:钉钉的信息内容获得务必在钉钉运用自然环境中运作。(我是在电脑上上安裝安卓系统仿真模拟器随后安裝钉钉APP开展调节的)

到此这篇有关钉钉公司內部H5微运用开发设计详解的文章内容就详细介绍到这了,更多有关钉钉公司內部H5微运用內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:Html5 canvas画图白板踩坑 返回下一篇:没有了