Logora Integration in WebView with SSO

Introduction

Integrating Logora in a WebView allows you to display the debate space directly within a mobile application or a website in WebView mode. This approach ensures a seamless user experience while maintaining Logora's interactive features.

Two applications have already successfully integrated Logora: Der SPIEGEL and Suedkurier. You can see these integrations in action at the following links:

For seamless user authentication, Logora supports Single Sign-On (SSO) through the injection of a token into the logora_config object under the remote_auth parameter. Logora's SSO integration is only compatible with the JWT authentication method.

1. Installing Logora in WebView

Installing Logora in a WebView follows the same procedure as the standard installation by inserting the standard JavaScript code. Here are the steps to follow:

1.1 Creating the WebView

In your mobile application or WebView site, create a web view that loads the URL of the debate space. Example in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logora Debate</title>
    <script>
      var logora_config = {
        shortname: "APPLICATION_NAME",
        remote_auth: "YOUR_JWT_SSO_TOKEN"
      };
    </script>
    <script src="https://cdn.logora.com/debat.js"></script>
</head>
<body>
    <div id="logora_app"></div>
</body>
</html>

1.2 Loading in a Mobile WebView

Example in Swift (iOS)

import UIKit
import WebKit

class DebateViewController: UIViewController {
    var webView: WKWebView!
    
    override func loadView() {
        webView = WKWebView()
        webView.configuration.preferences.javaScriptEnabled = true
        view = webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: "https://yoursite.com/debate-space")!
        webView.load(URLRequest(url: url))
    }
}

Example in Kotlin (Android)

import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity

class DebateActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val webView = WebView(this)
        webView.settings.javaScriptEnabled = true
        webView.loadUrl("https://yoursite.com/debate-space")
        setContentView(webView)
    }
}

2. Single Sign-On (SSO) in WebView

For users to be automatically authenticated on Logora without re-entering their credentials, it is necessary to inject a token into remote_auth within logora_config.

Logora's SSO integration is only compatible with JWT authentication.

You can check the detailed guide on authentication in our JWT documentation.

Example configuration:

var logora_config = {
  shortname: "APPLICATION_NAME",
  remote_auth: "YOUR_JWT_SSO_TOKEN"
};

User Logout

To log out a user, simply remove the remote_auth value or pass an empty string:

var logora_config = {
  shortname: "APPLICATION_NAME",
  remote_auth: ""
};

3. Initial Route

To define the first page that will be displayed in the webview, you can pass the desired path as the initial_path parameter:

var logora_config = {
    shortname: "APPLICATION_NAME",
    initial_path: "/debate/debate-title"
};

The application will then open directly on this page. This provides a direct link to the debate space pages.

Conclusion

With this integration, your users can interact on Logora without friction, directly from your application or WebView site while benefiting from secure and seamless authentication through JWT-based SSO.

Introduction​

1. Installing Logora in WebView​

1.1 Creating the WebView​

1.2 Loading in a Mobile WebView​

2. Single Sign-On (SSO) in WebView​

User Logout​

3. Initial Route​

Conclusion​