
# JavaScript
#### 操作场景
使用JavaScript语言调用APP认证的API时，您需要先获取SDK，然后新建工程，最后参考API调用示例调用API。
JavaScript SDK支持**Node.js** 、**浏览器**等运行环境。
关于开发环境搭建，本章节以IntelliJ IDEA 2018.3.5版本、搭建Node.js环境为例。浏览器只提供代码示例说明。
#### 准备环境
- 已获取API调用信息，具体参见[认证前准备](https://support.huaweicloud.com/devg-apig/apig-dev-180907066.html)。
- 已安装Nodejs安装包15.10.0或以上版本，如果未安装，请至[Nodejs官方下载页面](https://nodejs.org/en/)下载。
- 已安装IntelliJ IDEA 2018.3.5或以上版本，如果未安装，请至[IntelliJ IDEA官方网站](https://www.jetbrains.com/idea/)下载。
- 已在IntelliJ IDEA中安装Nodejs插件，如果未安装，请按照[图1]所示安装。
  图1安装Nodejs插件   
  ![](https://support.huaweicloud.com/devg-apig/zh-cn_image_0000002189804846.png "点击放大") 
 
#### 获取SDK
请在API网关控制台选择"帮助中心"，在"SDK使用指引"页签中下载对应语言所使用SDK。
或直接[下载SDK](https://obs.cn-north-1.myhuaweicloud.com/apig-sdk/ApiGateway-javascript-sdk.zip)的最新版本，获取"ApiGateway-javascript-sdk.zip"压缩包，解压后目录结构如下：
| 名称                          | 说明                   |
|:---|:---|
| signer.js                   | SDK代码                |
| node_demo.js                | Nodejs示例代码           |
| demo.html                   | 浏览器示例代码              |
| demo_require.html           | 浏览器示例代码（使用require加载） |
| test.js                     | 测试用例                 |
| js\\hmac-sha256.js          | 依赖库                  |
| licenses\\license-crypto-js | 第三方库license文件        |
| licenses\\license-node      | 第三方库license文件        |
   
#### 创建工程
1. 打开IntelliJ IDEA，选择菜单"File \> New \> Project"。 
   弹出"New Project"对话框。选择"Static Web"，单击"Next"。
   图2Static Web   
   ![](https://support.huaweicloud.com/devg-apig/zh-cn_image_0000002225165233.png "点击放大")
   
   
2. 单击"..."，在弹出的对话框中选择解压后的SDK路径，单击"Finish"。 
   图3选择解压后JavaScript的SDK路径   
   ![](https://support.huaweicloud.com/devg-apig/zh-cn_image_0000002225090765.png "点击放大")
   
   
3. 完成工程创建后，目录结构如下。 
   图4新建工程JavaScript的目录结构   
   ![](https://support.huaweicloud.com/devg-apig/zh-cn_image_0000002189645222.png)
   - node_demo.js：Nodejs示例代码，请根据实际情况修改参数后使用。具体代码说明请参考[调用API（Node.js）示例]。
   
   - demo.html：浏览器示例代码，请根据实际情况修改参数后使用。具体代码说明请参考[调用API（浏览器）示例]。
   
   
   
   
4. 单击"Edit Configurations"，弹出"Run/Debug Configurations"对话框。 
   图5Click Edit Configurations   
   ![](https://support.huaweicloud.com/devg-apig/zh-cn_image_0000002189804850.png)
   
   
5. 单击"+"，选择"Node.js"。 
   图6选择Node.js   
   ![](https://support.huaweicloud.com/devg-apig/zh-cn_image_0000002225165237.png)
   
   
6. "JavaScript file"选择"node_demo.js"，单击"OK"，完成配置。 
   图7选择node_demo.js   
   ![](https://support.huaweicloud.com/devg-apig/zh-cn_image_0000002225090769.png "点击放大")
   
   
 
 #### 调用API（Node.js）示例
1. 在工程中引入signer.js。 
   ```
   var signer = require('./signer')
   var https = require('https')
   ```
   
   
2. 生成一个新的Signer，填入AppKey和AppSecret。 
   1. 本示例以AK和SK保存在环境变量中为例，运行本示例前请先在本地环境中设置环境变量HUAWEICLOUD_SDK_AK和HUAWEICLOUD_SDK_SK。以Linux系统为例在本地将已[获取的AK/SK](https://support.huaweicloud.com/devg-apig/apig-dev-180907066.html#apig-dev-180907066__zh-cn_topic_0129804076_li1220115514543)设置为环境变量。
      1. 打开终端，输入以下命令打开环境变量配置文件。 **vi \~/.bashrc**
         
      
      2. 设置环境变量，保存文件并退出编辑器。
         ```
         export HUAWEICLOUD_SDK_AK="已获取AK值" 
         export HUAWEICLOUD_SDK_SK="已获取SK值"
         ```
         
      
      3. 输入以下命令使配置文件生效。 **source \~/.bashrc**
         
       
   
   2. 生成一个新的Signer，填入已设置的环境变量。
      ```
      var sig = new signer.Signer()
      // Directly writing AK/SK in code is risky. For security, encrypt your AK/SK and store them in the configuration file or environment variables.
      // In this example, the AK/SK are stored in environment variables for identity authentication. Before running this example, set environment variables HUAWEICLOUD_SDK_AK and HUAWEICLOUD_SDK_SK.
      sig.Key = process.env.HUAWEICLOUD_SDK_AK
      sig.Secret = process.env.HUAWEICLOUD_SDK_SK
      ```
      
   
   
   
   
3. 生成一个Request对象，指定方法名、请求uri和body。 
   ```
   var r = new signer.HttpRequest("POST", "c967a237-cd6c-470e-906f-a8655461897e.apigw.exampleRegion.com/app1?a=1");
   r.body = '{"a":1}'
   ```
   
   
4. 给请求添加x-stage头，内容为环境名。如有需要，添加需要签名的其他头域。 
   ```
   r.headers = { "x-stage":"RELEASE" }
   ```
   
   
5. 进行签名，执行此函数会生成请求参数，用于创建http(s)请求，请求参数中添加了用于签名的X-Sdk-Date头和Authorization头。 
   ```
   var opts = sig.Sign(r)
   ```
   
   
6. 访问API，查看访问结果。如果使用https访问，则将"http.request"改为"https.request"。 
   ```
   var req=http.request(opts, function(res){
           console.log(res.statusCode)  
           res.on("data",function(chunk){
   console.log(chunk.toString())
   })
   })
   req.on("error",function(err){
   console.log(err.message)
   })
   req.write(r.body)
   req.end()
   ```
   
   
 
 #### 调用API（浏览器）示例
1. 由于浏览器限制从页面脚本内发起跨域请求，因此浏览器访问API前需要在**API网关控制台** 上创建一个跨域共享策略，允许浏览器向跨域服务器发送XMLHttpRequest请求，并为跨域共享策略绑定API。
   
   创建策略请参考[跨域共享策略说明](https://support.huaweicloud.com/usermanual-apig/apig_03_0021.html)。
   图8创建跨域共享策略示例   
   ![](https://support.huaweicloud.com/devg-apig/zh-cn_image_0000002189645226.png "点击放大")
   
   
2. 在**html** 中引入signer.js及依赖。
   
   ```
   <script src="js/hmac-sha256.js"></script>
   <script src="js/moment.min.js"></script>
   <script src="js/moment-timezone-with-data.min.js"></script>
   <script src='signer.js'></script>
   ```
   
   
3. 进行签名和访问。 
   1. 本示例以AK和SK保存在环境变量中为例，运行本示例前请先在本地环境中设置环境变量HUAWEICLOUD_SDK_AK和HUAWEICLOUD_SDK_SK。以Linux系统为例在本地将已[获取的AK/SK](https://support.huaweicloud.com/devg-apig/apig-dev-180907066.html#apig-dev-180907066__zh-cn_topic_0129804076_li1220115514543)设置为环境变量。
      1. 打开终端，输入以下命令打开环境变量配置文件。 **vi \~/.bashrc**
         
      
      2. 设置环境变量，保存文件并退出编辑器。
         ```
         export HUAWEICLOUD_SDK_AK="已获取AK值" 
         export HUAWEICLOUD_SDK_SK="已获取SK值"
         ```
         
      
      3. 输入以下命令使配置文件生效。 **source \~/.bashrc**
         
       
   
   2. 填入已设置的环境变量，进行签名和访问。
      ```
      var sig = new signer.Signer()
      sig.Key = getenv('HUAWEICLOUD_SDK_AK')
      sig.Secret = getenv('HUAWEICLOUD_SDK_SK')
      var r= new signer.HttpRequest()
      r.host = "c967a237-cd6c-470e-906f-a8655461897e.apigw.exampleRegion.com"
      r.method = "POST"
      r.uri = "/app1"
      r.body = '{"a":1}'
      r.query = { "a":"1","b":"2" }
      r.headers = { "Content-Type":"application/json" }
      var opts = sig.Sign(r)
      var scheme = "https"
      $.ajax({
      type: opts.method,
      data: req.body,
      processData: false,
      url: scheme + "://" + opts.hostname + opts.path,
      headers: opts.headers,
      success: function (data) {
      $('#status').html('200')
      $('#recv').html(data)
      },
      error: function (resp) {
      if (resp.readyState === 4) {
      $('#status').html(resp.status)
      $('#recv').html(resp.responseText)
      } else {
      $('#status').html(resp.state())
      }
      },
      timeout: 1000
      });
      ```
      
   
   
   
   
 
