Bill McRoberts

Slack Sandbox

Xamarin.Forms • Custom Rendering • Xamarin.Auth • Refit

Beginning sandbox repository for building out a Xamarin.Forms implementation for Slack.

My work includes 4 years development on the GroupMe (http://groupme.com) group chat app from Microsoft. Hence, I’ve always been interested in taking a closer look at Slack (http://slack.com), a team-based communication app with extension capabilities. We can divide the building blocks for a Slack app into the following categories - mapped to the Xamarin component/technology mainly responsible:

Setup

1. Go to http://slack.com and create your Slack account.
2. Go to https://api.slack.com/ and:
   • Register as a Developer
   • Create a Slack app
3. In Visual Studio, start with a new Blank App (Xamarin.Forms.Portable), and remove the Windows Phone platform project.

OAuth Authentication

We’ll use Xamarin.Auth for our OAuth authentication needs. Because we need platform specific UI flows for authentication, we’ll create a custom page renderer for our needs.

Start with the class OAuthSettings to hold our OAuth credentials.

```

public class OAuthSettings
{
    public OAuthSettings(
        string clientId,
        string clientSecret,
        string scope,
        string authorizeUrl,
        string redirectUrl,
        string accessTokenUrl)
    {
        ClientId = clientId;
        ClientSecret = clientSecret;
        Scope = scope;
        AuthorizeUrl = authorizeUrl;
        RedirectUrl = redirectUrl;
        AccessTokenUrl = accessTokenUrl;
    }

    public string ClientId { get; private set; }
    public string ClientSecret { get; private set; }
    public string Scope { get; private set; }
    public string AuthorizeUrl { get; private set; }
    public string RedirectUrl { get; private set; }
    public string AccessTokenUrl { get; private set; }
}

```

Note here that we are using the “code” OAuth flow as opposed to the “token” OAuth flow, hence the need for the accessTokenUrl.

Add a public OAuthSettings to your App class.

public OAuthSettings OAuthSettings { get; private set; }

And initialize it in the App constructor. The values will come from you Slack app that you setup above.

```

        OAuthSettings = new OAuthSettings(
            clientId: "you client id",
            clientSecret: "your client secret",
            scope: "channels:read chat:write:user",
            authorizeUrl: "https://slack.com/oauth/authorize",
            redirectUrl: "your redirect url",
            accessTokenUrl: "https://slack.com/api/oauth.access");

```

Note that we are only using a simple set of scopes and that the redirect url needs to be a valid url of your own.

Web API

Real Time Messaging API

UI