Overwolf

Overwolf

  • Getting Started
  • Docs
  • API
  • Events Status
  • Blog
  • Q&A
  • Support

›Integrations

Best Practices

  • Overview
  • App specific experience
  • First time user experience
  • App launch performance
  • Marketing Communications
  • User journey and error handling
  • Per-game settings
  • Hotkey best practices
  • Second monitor usage
  • Data persistence
  • Reduce OPK size
  • Use Tab as an app Hotkey
  • Type definition file
  • Download Link with referral ID
  • Video capture best practices
  • Enable Developer Tools
  • Exclusive Mode Overlay
  • Electron Migration

Using Windows API

  • Using Overwolf windows
  • Windows Communication
  • Windows Types
  • Resolution Size and Position
  • General Tips

Understanding OW logs

  • What are Overwolf logs
  • DxDiag log
  • Trace logs
  • OBS logs
  • OverwolfPerf log
  • Overlay game HTML

Using Plugins

  • Plugins overview
  • Plug-in Implementation
  • Write your own plugin
  • Sample plugin
  • Simple I/O plugin
  • TeamSpeak plugin
  • Downloader plugin
  • Process Manager plugin

Using Events

  • JavaScript events overview
  • Using game events in your app
  • Game events Simulator
  • Verifying event status

Developers Console

  • Submit a new version
  • Release notes
  • Submit for review
  • Update store listing
  • Manage your subscriptions
  • Users and permissions
  • Crash reports
  • Rating and reviews
  • App Channels
  • CLI

Integrations

  • Integrating app analytics
  • Login with Twitch
  • Login with Overwolf
  • Event SDK for Game Devs
  • Twitch Extensions

Request a Service

  • Marketing asset requirements
  • Looking for Group
  • Promoting your app
  • App recommendations

Community Help

  • Join the Community
  • Webinars
  • Developers Content
  • Code snippets

Legal

  • Legal overview
  • App terms
  • Developers terms
Edit

App login with Overwolf

This article will explain how to implement an Overwolf login/auth interface in your website.

Typical usage

One of the common uses for this feature is to enable OW apps developers to identify subscribed users on their website. Many times you would like to offer your premium users that purchased a subscription some unique features or content.

Besides, you can use this feature to do whatever you like: enable your users to use single sign-on without the need for a separate account, display synced info from your server (info that gathered using your OW apps and now can be displayed on your website too), etc.

note

This feature (get info about active subscriptions) will be released soon. We will update this page accordingly.

Login flow overview

This flow is for web browser only, we do not currently offer a client SDK that supports API-based authentication.

  • Developers register their app for the OW SSO and get a unique client_id and client_secret.
  • The actual login is done using a login form hosted on the OW servers. This means you should only implement a "Login with Overwolf" button in your website. Once clicked, this button will open a new window/tab with the OW login form. (More info in step 1: Engage the SSO flow).
  • Once the login is completed on the OW hosted login page, the user is redirected to a pre-defined redirect_URI hosted on YOUR server (More info on how to implement this page in "Create redirect_uri endpoint").
  • The redirect_URI page executes a POST request to OW servers to request and get the auth token (and might include some other details like email, subscriptions, etc.) that was created after the login (More info in step 3: Get the auth token).

Prerequisite

Register your app on Overwolf

Before implementing the OW login in your website, you must register your app on Overwolf. To register, just send us an email to developers@overwolf.com. Once you register, your client_id and client_secret will be generated.

You should provide these parameters:

  1. client_name - The app's name.
  2. redirect_uris - An endpoint hosted on your server. More details here.
  3. logo_uri - URL of the app's logo.
  4. policy_uri - URL of the app's privacy policy.
  5. tos_uri - URL of the app's "Terms of Service".

Note: all the URIs needs to be accessible with a public domain (not localhost). Otherwise, our servers will not be able to complete the flow.

Your app's client_id and client_secret will be provided once you complete the registration.

Create redirect_uri endpoint

On your server, create an endpoint used to get the auth-token from Overwolf (by making a POST request to the OW server).

POST https://accounts.overwolf.com/oauth2/token?client_id={client id}&client_secret={client secret}&grant_type=authorization_code&code={code that came from request object, e.g: request.query.code}&redirect_uri={redirect_uri}

Required Query params:

  • client_id
  • client_secret
  • grant_type
  • code
  • redirect_uri

Required HTTP headers:

  • Content-Type: "application/x-www-form-urlencoded"

Sample code

This is an example code that shows how to implement a redirect_uri endpoint on your server.

var express = require('express');
var router = express.Router();
const axios = require('axios');
const querystring = require('querystring');

const demoClient = {
  client_id: 'xxxxxxxx',
  client_secret: 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy',
};

/**
 * this is the callback endpoint as passed in the redirect_uri parameter
 * and should be whitelisted in the oauth client application
 */
router.get('/auth/overwolf/callback', function(req, res, next) {
  const client = demoClient;
  axios.post('https://accounts.overwolf.com/oauth2/token',
    querystring.stringify({
      client_id: client.client_id,
      client_secret: client.client_secret,
      grant_type: 'authorization_code',
      code: req.query.code,
      redirect_uri: 'http://localhost:5000/auth/overwolf/callback'
    }),
    {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }).then(function(response) {
      // the response will contain the access token to be used
      console.log(response);
      res.json({});
    }).catch((e) => {
      console.error(e)
      res.send('err')
  });
});

router.get('/oidcresult', function(req, res, next) {
  res.json(req.query);
});

module.exports = router;

As you can see, redirect_uri is http://localhost:5000/auth/overwolf/callback. This page receives the auth token (or login error) once the auth process is finished on the OW side.

1. Engage the SSO flow.

The first step is to implement a login button on your website. Clicking the button should open a new tab or popup window by implementing this GET request:

GET https://accounts.overwolf.com/oauth2/auth?response_type=code&client_id={client id}&redirect_uri={redirect_uri}&scope={desired scope separated by '+', e.g: openid+profile+email}

Required Query params:

  • response_type
  • client_id
  • redirect_uri
  • scope - here you can define which details you would like to fetch from OW server.
    • Currently you can get the user openID, profile image, email. Soon, you will be able to get also the active subscriptions for this user.
    • During the login process the user will have to accept each scope, through the consent form (more details below).

2. Login on Overwolf

Once the SSO flow is engaged, the user is redirected to the OW hosted login page:

OW login screenshot

On successful login, the user will see a consent screen to requested scopes:

OW login consent

After the consent, we will redirect the user back to the redirect_uri pre-defined in the registration process.

3. Get the auth token

If no error occurred during the flow, the user is redirected to the redirect_uri endpoint, that POSTS the request for the auth-token. You can see how this POST request looks like in the Create redirect_uri endpoint section.

Once the POST completed, you will get the following auth token details:

  • access_token
  • expires_in
  • id_token
  • scope
  • token_type
Active Subscriptions

This feature (get info about active subscriptions) will be released soon. We will update this page accordingly.

Get user info from token

Once you have the encrypted JWT token, you can easily decode/decrypt it on your server side code using one of the available JWT libraries and get some additional user info:

  • Sub (username)
  • Nickname
  • Picture (avatar)
  • Email
  • Other JWT properties.

Most JWT packages can decode the token without verifying it, but in the production environment, it's recommended to verify the token to make sure that it hasn't been tampered with.

For example, the npm package jsonwebtoken offers jwt.decode() to decode the token and jwt.verify() to verify it.

Note that for verification, the OW public key is required. You can find it on this endpoint: https://accounts.overwolf.com/oauth2/jwks.json.

4. Close the login window.

Now, we can safely close the login window.

The login process is complete.

5. Live Demo

Below you can find a live example of the Overwolf SSO Process:

After clicking on this page, a new tab will open, and you will be able to login with your Overwolf username. Afterwards, you'll be sent back to this page, and the token will be displayed.

Of course, in practice, you will do something more meaningful with the auth token...

Note: currently, after login, you can't logout. Soon we will add here a logout button that enables you to quickly logout.

Download from Github

The server side code implemented in our server (in the redirect_uri), can be downloaded from our Github.

Last updated on 7/13/2021 by eransharv
← Login with TwitchEvent SDK for Game Devs →
  • Typical usage
  • Login flow overview
  • Prerequisite
    • Register your app on Overwolf
    • Create redirect_uri endpoint
  • 1. Engage the SSO flow.
  • 2. Login on Overwolf
  • 3. Get the auth token
    • Get user info from token
  • 4. Close the login window.
  • 5. Live Demo
  • Download from Github
  • Legal
    • Terms overview
    • Developer's terms
    • App terms
    • Overwolf terms
    • Overwolf Privacy policy
  • Support
    • Questions and Answers
    • Discord
    • Slack
    • Facebook
    • Twitter
  • Documentation
    • Changelog
    • API
    • App Creation Process
    • Best Practices
    • Game Events status
  • Information
    • Careers
    • Fund
    • Developers Blog
    • Overwolf Appstore
    • Advertise on Overwolf
Overwolf 2022