{"id":742,"date":"2021-08-31T08:51:48","date_gmt":"2021-08-30T23:51:48","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=742"},"modified":"2021-08-31T08:59:06","modified_gmt":"2021-08-30T23:59:06","slug":"getting-a-token-from-chatwork-oauth","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=742","title":{"rendered":"Getting a Token from Chatwork OAuth"},"content":{"rendered":"

The code for this post can be found here: https:\/\/github.com\/wsdCollins\/Chatwork-OAuth<\/a><\/p>\n

This is a sample repo for connecting to and using OAuth with Chatwork. This
\nrepository will cover the scope of creating a new application, getting approval
\nor denial from a user. And concluding with getting a token on behalf of the
\nuser. This repository is not intended to cover the finer points of connecting
\nto OAuth, only to serve as a practical coding guide for connecting to
\nChatwork as an OAuth provider.<\/p>\n

Step 01 – Creating a Domain Name<\/h2>\n

To start we will need a domain with https to host our application on. In this case we will
\nuse cw.blog.wsd.sh<\/em>*. First we will add a DNS entry for the subdomain.<\/p>\n

\"Screenshot<\/a><\/p>\n

Then we need to create an Nginx configuration to serve the site.<\/p>\n

# vim \/etc\/nginx\/conf.d\/cw.blog.wsd.sh.conf\r\n--- Paste the Following content ---\r\nserver {\r\n\r\n    listen 80;\r\n    listen [::]:80;\r\n\r\n    index index.html;\r\n    server_name cw.blog.wsd.sh;\r\n\r\n    proxy_set_header Host $host;\r\n    proxy_set_header X-Forwarded-Proto $scheme; #http pr https\r\n    proxy_set_header X-Real-IP $remote_addr; #client IP address\r\n    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\r\n\r\n    location ^~ \/.well-known\/acme-challenge\/ {\r\n        root \/var\/www\/html;\r\n        default_type \"text\/plain\";\r\n    }\r\n\r\n    location \/ {\r\n        #try_files $uri $uri\/ =404;\r\n        proxy_pass http:\/\/localhost:4000;\r\n    }\r\n\r\n}\r\n--- Write and Quit ---\r\n<\/code><\/pre>\n
And then we restart nginx to implement the changes before calling certbot
\nto get a certificate from Let’s Encrypt.<\/p>\n
Once this is complete, you should have a valid https connection that returns
\na 502 error page because we have not set up a server to reverse proxy to.
\nWe will do that in Step 03.<\/p>\n
Step 02 – Create an OAuth Client<\/h2>\n
Login into Chatwork, and click on the top right hand menu. Then click on “Integrations”.<\/p>\n
\"Screenshot<\/a><\/p>\n
From the on the right hand menu click on OAuth, and then in the OAuth page, click on the
\nbutton that says “Create New”.<\/p>\n
\"Screenshot<\/a><\/p>\n
Note that in the link provided for the OAuth Docmentation is an English PDF with some incomplete
\ninformation, I recoment using the Japanese documentation which can be found here: https:\/\/developer.chatwork.com\/ja\/<\/a>.<\/p>\n
\"Screenshot<\/a><\/p>\n
From there we will enter the details for our OAuth client applicaiton. We will set the “Client Name” as “WSD Hello World”, we will include a logo for the Icon, for the “Client Type” we will select ” Confidential”, and for the “Redirect URI” we will specify “https:\/\/cw.blog.wsd.sh\/oauth\/chatwork<\/a>“.<\/p>\n
After that we need to select the checkboxes for which permissions we will use from the application. In our case, we’re only interested in reading or writing files. So We’ll selected the scopes for basic account information, ability to read rooms, ability to read files from rooms, and ability to write files to rooms. If needed, the scopes and callbacks can be edited later. Once we’re done, we click “Create” at the bottom.<\/p>\n
\"Screenshot<\/a><\/p>\n
Once that is complete, we should see this screen.<\/p>\n
\"Screenshot<\/a><\/p>\n
Make a note of the Client ID and Client Secret at the bottom. These will be needed in the next step to authenticate our server to get tokens.<\/p>\n
Step 03 – Create Application<\/h2>\n
First we clone this repository<\/p>\n
Then we need to add our client id and client seecret to the dotenv file. Replace the values
\nwith your client id and client secret from the last step (without the square brackets).<\/p>\n
From there we can run the server.<\/p>\n
\n
# node index.js\r\n<\/code><\/pre>\n
If we open up the browser to https:\/\/cw.blog.wsd.sh\/<\/a>, we should see a mockup integrations page.<\/p>\n
\"Screenshot<\/a><\/p>\n
If we click on the “Connect” under the “Chatwork” integration, it should take us to the OAuth approval page.<\/p>\n
\"Screenshot<\/a><\/p>\n
If we click “Approve”, it should take up to the callback page, where we get a token to use the application.<\/p>\n
\"Screenshot<\/a><\/p>\n
And we get a token that will expire in a few minutes.<\/p>\n
Explanation<\/h2>\n
Two points to draw attention to are how we get to the OAuth accept screen, and what
\nto do after the user has chosen an action.<\/p>\n
\n
(function () {\r\n\r\n    'use strict'\r\n\r\n    const state = Date.now();\r\n    const url = [\r\n        'https:\/\/www.chatwork.com\/packages\/oauth2\/login.php',\r\n        '?response_type=code',\r\n        '&redirect_uri=https:\/\/cw.blog.wsd.sh\/oauth\/chatwork',\r\n        '&client_id=0D43MyaOxMyO6',\r\n        '&scope=users.all:read rooms.info:read rooms.files:read rooms.files:write',\r\n        `&state=${state}`\r\n    ].join('');\r\n\r\n    const cw_oauth = document.getElementById('cw_oauth');\r\n    cw_oauth.setAttribute('href', url);\r\n\r\n    feather.replace({ 'aria-hidden': 'true' })\r\n\r\n})();\r\n<\/code><\/pre>\n
In public\/js\/oauth.js<\/code> is where we create the link to the Chatwork confirmation
\npage. The link to the page is https:\/\/www.chatwork.com\/packages\/oauth2\/login.php<\/code>
\nand we provide several GET query parameters to pass to the page.<\/p>\n
The response_type<\/em> is code, meaning that Chatwork creates a code, and we return it
\nback to them to confirm that we received it. The redirect_uri<\/em> is where we want our
\napplication to handle the response from the confirmation screen. The client_id<\/em> lets
\nChatwork know specifically which application to get approval for. The state<\/em> is a
\nsession id, or some other one time value to differentiate which user and which
\nsession the confirmation attempt is being made for. And scope<\/em> tells the confirmation
\nscreen which permissions we want the user to allow us to use.<\/p>\n
\n
const express = require('express')\r\nconst fetch = require('node-fetch')\r\nconst dotenv = require('dotenv')\r\n\r\ndotenv.config();\r\n\r\nconst app = express()\r\nconst port = 4000\r\napp.use(express.static('public'))\r\n\r\napp.get('\/oauth\/chatwork', async function(req, res) {\r\n\r\n    \/\/ Create the Authentication body\r\n\r\n    const body = [ \r\n        'grant_type=authorization_code',\r\n        `code=${req.query.code}`,\r\n        'redirect_uri=https:\/\/cw.blog.wsd.sh\/oauth\/chatwork'\r\n    ].join('&');\r\n\r\n    \/\/ Create Authentication Header\r\n\r\n    const basic =  `${process.env.CLIENT_ID}:${process.env.CLIENT_SECRET}`;\r\n    const base64 = Buffer.from( basic ).toString( 'base64' );\r\n\r\n    const url = 'https:\/\/oauth.chatwork.com\/token';\r\n    const params = {\r\n        method : 'POST',\r\n        headers : {\r\n            'Authorization' : `Basic ${base64}`,\r\n            'Content-Type': 'application\/x-www-form-urlencoded'\r\n        },\r\n        body : body\r\n    }\r\n\r\n    \/\/ Send Authentication Response\r\n\r\n    const ajax = await fetch( url, params );\r\n    const json = await ajax.json();\r\n    res.json( json );\r\n\r\n});\r\n\r\napp.listen(port, () => {\r\n    console.log(`Example app listening at port: ${port}`)\r\n});\r\n<\/code><\/pre>\n
Once the client either clicks “Allow” or “Deny” on the confirmation screen they
\nare redirected to the url we specified in GTE query parameters for the
\nconfirmation screen. In this case since we’re using Express, I used a path
\nwithout an extension and doesn’t represent a folder to designate that callback
\nis being executed as a server-side process as opposed to a page that is displayed
\nto the user.<\/p>\n
Admittedly this callback doesn’t handle the possibility of getting a “Deny” reply.
\nIn reality, we should be checking the response and replying accordingly. In this case
\nwe wanted to focus on how we accept the token on the condition the user clicks
\non “Allow”. And we see that in the body which provides three values.<\/p>\n
The two values that are passed to us as GET query parameters, is the state value we provided
\nand a code value. The first value we reply with is grant_type<\/em>, which has a fixed value of
\n“authorization_code”. For the code<\/em> we supply the GET query parameter that was sent to us.
\nAnd last is the redirect_uri<\/em>, which shouldn’t be needed as is not required as we’re already
\ndone with that part, but I found if I didn’t supply it, I got errors that the value didn’t
\nmatch or something.<\/p>\n
From there we need to supply our secret to confirm to Chatwork OAuth, that it really is
\nus, and not somebody else using our client ID. The way we do this is a twist on
\n“Basic Authentication”, which really just means authenticating with “username:password”.
\nFor the username we supply the Client Id from our OAuth settings page, followed by a colon
\nand the password is the Client Secret from our OAuth settings page.<\/p>\n
We then take the string of “[Client_Id]:[Client_Secret]” and encode that as a base64
\nstring. We then need to supply that as a header. The header value is “Authorization”, and
\nthe value is the string “Basic” followed by a space and the base64 string of our
\nclient id and client secret. The content type is application\/x-www-form-urlencoded<\/code>,
\nand the body is our form-urlencoded list of arguments made in the body.<\/p>\n
We send this to Chatwork to get a token as a response. And that allows us to send
\nAPI requests on behalf of the user, but we still have some questions to fill in
\nfrom here. How do we renew a token? How do we get a token on login? And how do we
\nstructure our app to recognize the token exists to act accordingly?<\/p>\n","protected":false},"excerpt":{"rendered":"
The code for this post can be found here: https:\/\/github.com\/wsdCollins\/Chatwork-OAuth This is a sample repo f…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/742"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=742"}],"version-history":[{"count":5,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/742\/revisions"}],"predecessor-version":[{"id":747,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/742\/revisions\/747"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}