Documentation API Reference

Part 2: Connect to Slack

这s tutorial is part of a series that builds a Zendesk integration for Slack:

In the previous tutorial, you created a Zendesk app with aConnect to Zendeskbutton. The button lets admins connect the integration to their Zendesk instance.

In this tutorial, you'll add aConnect to Slackbutton to the app. This button lets admins connect the integration to a Slack workspace.

Set up Slack

When complete, the integration will post messages to a Slack channel. To post messages, the integration needs a Slack app.

Create a Slack app

To start, create a Slack app named Zendesk Ticket Bot.

  1. Go tohttps://api.slack.com/appsand clickCreate an App.

  2. In the modal, clickFrom scratch.

  3. EnterZendesk Ticket Botas the app name. Then select a workspace.

  4. ClickCreate App.

    The Basic Information page for your Slack app is displayed.

  5. Scroll down the page to theApp Credentialssection.

  6. In theClient Secretfield, clickShow.

  7. Save the client ID and secret in a secure place. You'll use them later in this tutorial.

Add a scope

Next, add thechat:writescope to your Slack app. This scope gives the app permission to post messages.

  1. In the left sidebar, clickOAuth & Permissions.

    The OAuth & Permissions page is displayed.

  2. Scroll down to theScopessection.

  3. UnderBot Token Scopes, clickAdd an OAuth Scope.

  4. In the field, typechat:writeand press Enter.

Install the app to your workspace

接下来,安装松弛应用到您的工作空间中。这s lets the app post messages in the workspace.

  1. Scroll up to the top of the OAuth & Permissions page.

  2. UnderOAuth Tokens for Your Workspace, clickInstall to Workspace.

    The Slack OAuth page opens in a new tab.

  3. ClickAllow.

    The OAuth page closes and redirects you back to the OAuth & Permissions page.

Connect to Slack

When an admin clicks theConnect to Slackbutton, the app uses ZIS APIs to start an OAuth flow with Slack. When done, the OAuth flow sends a Slack access token to ZIS for storage. Your integration can then use the stored token to make Slack API requests.

Add a redirect URL

设置一个默认URL重定向为你松弛大调的应用ing an OAuth flow, Slack sends ZIS an verification code at this URL. Later in the OAuth flow, ZIS exchanges the verification code for an access token.

  1. On the OAuth & Permissions page, scroll down to theRedirect URLssection.

  2. ClickAdd New Redirect URL.

  3. In the field, enter:

    https://zis.zendesk.com/api/services/zis/connections/oauth/callback

  4. ClickAdd.

  5. ClickSave URLs.

Add a Slack OAuth client

To start an OAuth flow, ZIS first requires an OAuth client object. The client contains details used to pass data between ZIS and the other system during the OAuth flow.

For third-party systems, such as Slack, you need to create the client using the [Create OAuth Client](/api-reference/integration-services/connections/oauth_clients/#create-oauth-client endpoint.

  1. In your command-line interface, run the following curl request. Replace:

                   
    
                
    curl-XPOSThttps://{subdomain}.亚博.com/api/services/zis/connections/oauth/clients/{subdomain}_zendesk_to_slack \-H"Authorization: Bearer {access_token}"\-H"Content-type: application/json"\-d '{"name":"slack","client_id":"{slack_client_id}","client_secret":"{slack_client_secret}","default_scopes":"chat.postMessage","auth_url":"https://slack.com/oauth/v2/authorize","token_url":"https://slack.com/api/oauth.v2.access"}'

    The request creates an OAuth client named "slack." If successful, the response contains the client's universally unique ID (UUID).

Add a "Connect to Slack" button

Next, add aConnect to Slackbutton to your Zendesk app.

  1. In the Zendesk app'sassetsfolder, openiframe.html. Add the following HTML directly after the

    tag containing theConnect to Zendeskbutton.

                   
    
                
    ...<divclass="c-txt u-mb"><buttonid="btnConnect"class="c-btn c-btn--primary">Connect to Zendeskbutton>div><divclass="c-txt u-mb"><buttonid="btnConnectSlack"class="c-btn c-btn--primary">Connect to Slackbutton>div>...

  2. Inbootstrap.js, add the following:

                   
    
                
    ...startOAuth(integrationName,subdomain);});// Bind button to start a Slack OAuth flowdocument.getElementById("btnConnectSlack").addEventListener("click",function(){startSlackOAuth(integrationName,subdomain);});...

    The code binds theConnect to Slackbutton to thestartSlackOAuthfunction.

  3. Inconnect.js, add the following to the end of the file:

                   
    
                
    ...// startSlackOAuth initiates a Slack OAuth flowfunctionstartSlackOAuth(integrationName,subdomain){letdata=JSON.stringify({name:"slack",// the name the obtained access tokenoauth_client_name:"slack",oauth_url_subdomain:subdomain,origin_oauth_redirect_url:window.location.href,permission_scopes:"chat:write",});letrequest={type:"POST",url:"/api/services/zis/connections/oauth/start/"+integrationName,contentType:"application/json",data:data,};client.request(request).then(function(response){console.log("Slack OAuth started");authorize(response.redirect_url);},function(response){console.log("Failed to start Slack OAuth: ",response);});}

    The code defines thestartSlackOAuthfunction. When called,startSlackOAuthmakes aStart OAuth Flowrequest to kick off an OAuth flow with Slack. The request uses the "slack" client you created earlier. When the OAuth flow completes, ZIS stores the resulting access token in anOAuth connection.

    The Start OAuth Flow endpoint requires a name for the connection.startOAuthuses a connection name of "slack."

  4. Saveiframe.html,bootstrap.js, andconnect.js. Then refresh the app.

    Your app now displays aConnect to Slackbutton.

Get a Slack access token

Next, use your Zendesk app'sConnect to Slackbutton to start an OAuth flow with Slack.

  1. In your app, clickConnect to Slack.

    A workspace sign-in page opens in a new tab.

  2. Enter your workspace's subdomain and clickContinue.

    A Slack sign-in page is displayed.

  3. Sign in to Slack using your preferred method.

    A Slack OAuth page is displayed.

  4. ClickAllow.

    The OAuth page closes and redirects you back to the OAuth & Permissions page.

Verify the Slack access token

Next, use aShow OAuth Connectionrequest to get the "slack" OAuth connection you created. This lets you verify that your integration can use the connection to authenticate Slack API requests.

In your command-line interface, run the following curl request. Replace{access_token}with the OAuth access token you got inVerify the Zendesk access token.

             

              
curl-XGEThttps://{subdomain}.亚博.com/api/services/zis/connections/{subdomain}_zendesk_to_slack?name=slack \-H"Authorization: Bearer {access_token}"

The response contains details about the "slack" connection, including its access token. For example:

             

              
{"uuid":"***uuid***","name":"slack","zendesk_account_id":12345678,"integration":"example_zendesk_to_slack","permission_scope":"chat:write","access_token":"***access token***","token_type":"bot","refresh_token":"","token_expiry":"0001-01-01T00:00:00Z","oauth_access_token_response_body":"","oauth_url_subdomain":"example","created_by":"1234567890123","created_at":"2099-05-16T15:33:19Z"}

In the next tutorial, you'll add an app UI to let admins set the ticket priority and Slack channel for your integration. Refer toPart 3: Add a configuration UI.