# 07 前后端接入阿里云盾

## 前端集成

### 准备工作

```javascript
// 先引入链接
<script src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>

// 预设 DOM
<div id="__nc">
  <div id="nc"></div>
</div>
```

### 集成滑动验证

```javascript
const NoCaptcha = window.NoCaptcha
const nc_appkey = 'FFFFXXXXX666888000'
const nc_token = [nc_appkey, new Date().getTime(), Math.random()].join(':')
const scene = 'nc_login_h5'
const nc = NoCaptcha.init({
  renderTo: '#nc',
  appkey: nc_appkey,
  scene,
  token: nc_token,
  is_Opt: 0,
  language: 'cn',
  timeout: 10000,
  retryTimes: 5,
  errorTimes: 5,
  inline: false,
  bannerHidden: false,
  initHidden: false,
  callback: async (data) => {
    window.console && console.log(nc_token)
    window.console && console.log(data.csessionid)
    window.console && console.log(data.sig)
    // 发起后端校验
    const res = await request({
      url: '/afs/auth',
      method: 'POST',
      data: {
        sessionId: data.csessionid,
        sig: data.sig,
        token: nc_token,
        scene,
      },
    })
    if (res.status === 200) {
      this.$toast.fail('验证成功')
    } else {
      this.$toast.fail('验证失败')
    }
  },
  error: () => {
    this.$toast.fail('验证失败')
  },
})
NoCaptcha.setEnabled(true)
nc.reset()
NoCaptcha.upLang('cn', {
  LOADING: '加载中...',
  SLIDER_LABEL: '请向右滑动验证',
  CHECK_Y: '验证通过',
  ERROR_TITLE: '非常抱歉，这出错了...',
  CHECK_N: '验证未通过',
  OVERLAY_INFORM: '经检测你当前操作环境存在风险，请输入验证码',
  TIPS_TITLE: '验证码错误，请重新输入',
})
```

## 后端集成

### Maven 引入依赖

```xml
<!-- 阿里验证 -->
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-core</artifactId>
    <version>4.5.2</version>
</dependency>
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-afs</artifactId>
    <version>1.0.1</version>
</dependency>
```

### 后端校验

```java
@Slf4j
@RestController
@RequestMapping("/afs")
@RequiredArgsConstructor(onConstructor = @__(@Autowired))
@Api(value = "人机认证Controller", tags = {"人机认证Controller"})
public class AfsController {

    private final HttpServletRequest servletRequest;

    @Value("${nc.regionId}")
    private String regionId;

    @Value("${nc.accessKeyId}")
    private String accessKeyId;

    @Value("${nc.accessKeySecret}")
    private String accessKeySecret;

    @Value("${nc.appKey}")
    private String appKey;

    private IAcsClient iAcsClient;

    @PostConstruct
    private void init() {
        IClientProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
        iAcsClient = new DefaultAcsClient(profile);
        try {
            DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");
        } catch (ClientException e) {
            e.printStackTrace();
        }
    }

    @PostMapping("/auth")
    @ApiOperation(value = "人机验证", notes = "人机验证")
    public CommJSONResult auth(@RequestBody AuthParams params) throws Exception {
        String ip = IpUtil.getIpAddr(this.servletRequest);
        AuthenticateSigRequest request = new AuthenticateSigRequest();
        request.setSessionId(params.getSessionId());
        request.setSig(params.getSig());
        request.setToken(params.getToken());
        request.setScene(params.getScene());
        request.setAppKey(appKey);
        request.setRemoteIp(ip);
        AuthenticateSigResponse response = iAcsClient.getAcsResponse(request);
        if (response.getCode() == 100) {
            return CommJSONResult.ok("OK");
        } else {
            return CommJSONResult.errorMsg("认证失败");
        }
    }

}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chanshiyu.gitbook.io/blog/hou-duan/shi-zhan-xi-lie/07-qian-hou-duan-jie-ruali-yun-dun.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.