DEV Community: Craig Oda

How to Set Up Django With Central OAuth2 Login

Craig Oda — Thu, 24 Oct 2019 20:52:48 +0000

I recently set up 10 Django servers to use the same Google G Suite corporate email login. This allows everyone in a company to log into all the Django and Discourse servers with the same email and password. This solution will also work with social logins from many providers such as Twitter, Facebook, GitHub. You can also use identity management solutions such as Auth0, Okta and OneLogin.

Although I assumed the task would be quick and easy, I ran into several challenges with outdated online examples. I’ll explain what I did for deployment with Django 2.2, Python 3.7 and social-app-django 3.1.

Before standardizing on Google OAuth2, I deployed with Auth0. Although the deployment was easy, users ran into problems with password resets using the Auth0 interface and there was no easy way to get support or ask questions to Auth0 during my assessment period. I decided to drop Auth0 for the initial deployment and go with Google.

The staff managing the content and users on all the Django and Discourse servers were already using Google email and therefore all staff had a Google account.

A GitHub repository of this example project is available
here.

Begin this tutorial after you have your Django project and app started.

Background

The screenshots and servers used in this example, are from the RICOH THETA Developer Community infrastructure run by Oppkey Host. We initially started with local logins on Discourse servers and one-off web sites. As the number of servers grew, we ran into management problems. We decided to standardize on Google OAuth2 due to simplicity of deployment.

A management interface allows content and user management staff from different companies to access the admin interface for many servers from different communities with the same email and password. Authorized servers are stored in a Profile object that extends the standard User object in Django. In addition to Django servers, staff log into and manage Discourse servers using the same dashboard.

To keep this tutorial simple, the management interface is not shown in this tutorial.

Setup

Install Social Auth

$ pip install social-auth-app-django

$ pipenv install social-auth-app-django

console.developers.google.com

Go to https//console.developers.google.com and create new credentials.

Select Web application.

Under Authorized redirect URIs, add the following:

http://localhost:8000/complete/google-oauth2/
https://project-domain.com/complete/google-oauth2/

Replace project-domain.com with the URL of your project server.

Settings.py

# social auth configuration

AUTHENTICATION_BACKENDS = (
    'social_core.backends.google.GoogleOAuth2',
    'django.contrib.auth.backends.ModelBackend',
)

LOGIN_URL = '/auth/login/google-oauth2/'

LOGIN_REDIRECT_URL = '/manage/'
LOGOUT_REDIRECT_URL = '/'
SOCIAL_AUTH_URL_NAMESPACE = 'social'


INSTALLED_APPS = [
    ...
    'social_django'
    ...
]

create a new file called local_settings.py and insert the following at the bottom of the settings.py file to create a connection from settings.py to local_settings.py:

try:
    from .local_settings import *
except ImportError:
    pass

local_settings.py

Put the values from Google into the constants below.

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'GOOGLE_KEY'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'SECRET'

urls.py

from django.contrib.auth.views import LogoutView
from django.urls import include

...

urlpatterns = [
path('admin/', admin.site.urls, name='administrator'),
path('', include('social_django.urls', namespace='social')),
path('', views_main.index, name='index'),
path(
    'logout/',
    LogoutView.as_view(template_name=settings.LOGOUT_REDIRECT_URL),
    name='logout'
    ),
path('manage/', views.manage, name='manage'),
]

views.py
def manage(request):
    return render(request, 'manage.html')

template manage.html
The snippet below uses Bootstrap for styling.
<div class="container pt-5">
        <h1>THETA Dream and Build Management Dashboard</h1>

        {% if user.is_authenticated %}

        <h2>
            <a href="/admin/">    Go To Dashboard</a>

        </h2>
        <hr>

        <a class="btn btn-primary mt-5" href="{% url 'logout' %}">Logout</a>

        {% else %}
        <a class="btn btn-primary" href="{% url 'social:begin' 'google-oauth2' %}">
                Login
                </a>
        {% endif %}
    </div>

make and migrate models

$ python manage.py makemigrations 
$ python manage.py migrate

run server and test

$ python manage.py runserver

Summary

Although there are many ways to set up centralized login for different web applications, using Google OAuth2 is simple and well-documented. If you’ve been hesitant to move off of local logins, it’s a great time to look at the available solutions.

Related Topics Not Covered in This Tutorial

360 Image Viewers for Web Developers

Craig Oda — Fri, 23 Aug 2019 02:04:53 +0000

Almost every developer working with 360 images will build a web site to share their 360 images at some point. This might only be for testing or to share with team members, but it could also be to show clients or customers.

Fortunately, there are many pre-built libraries and services to display 360 images in your custom web site.

A growing list of viewers is available here:

https://gallery.theta360.guide/viewers/

I'll include a list of 12 popular viewers below. Thanks to eGene
of 360 Photo to Video Online Converter
for getting this list started.

Pannellum

Pannellum is a free open source panorama and 360° viewer. It's small, fast, easy to use. Though pretty basic, it has an interesting feature — multires panoramas (ability to use images with different resolution depending on zoom for single panorama). It claims to work in all modern browsers with WebGL support. Mobile browsers are not officially supported, so they may or may not work properly.

Supported projections: equirectangular
License: MIT License
Price: free
More Information

Marzipano

Developed by a company acquired by Google, then open sourced, this powerful viewer offers plenty of features, including wizard tool to help you enable options that you need. It supports all major desktop and mobile browsers (and has Flash version for legacy), provides powerful Javascript API for you to build custom applications.

Supported projections: equirectangular, cube
License: Apache License 2.0
Price: free
More Information

Photo Sphere Viewer

Photo Sphere Viewer is a comprehensive JavaScript library that allows you to display panoramic images. It's based on Three.js and shows good performance on WebGL enabled browsers with fallback to canvas for older browsers. It also supports touch screens. Other cool features include cropped (incomplete) panorama support and support of various types of markers (polygons, polylines, html, images, SVGs).

Supported projections: equirectangular
License: MIT License
Price: free
More Information

360 Image Viewer

It's a basic panorama viewer that doesn't have lots of features, but it still can work for you depending on your needs as it does the job. Some settings include: field of view, rotation speed, damping and that's pretty much all. It provides ability to set a callback function on frame change, so some customization is possible. Please note that its navigation mode is different from some other viewers: it uses what is called QTVR style when to navigate the image you need to press mouse button and move the cursor (and it can't be changed to "drag" style). Check it out below or on their demo page to see if you are comfortable with it.

Supported projections: equirectangular
License: MIT License
Price: free
More Information

Kaleidoscope

An embeddable, lightweight, dependency-free 360º image and video viewer. Works in all modern browsers. Some basic options and methods available for custom integrations. Check out video demo on their demo page.

Supported projections: equirectangular
License: Apache License 2.0
Price: free
More Information

Panolens

Another Javascript panorama viewer based on Three.js with impressive set of features. Equirectangular and cube images, google street view images, annotations (markers) and more. Supports 360° videos. Ability to create interactive tours. Codepen playgrounds available on their website.

Supported projections: equirectangular, cube
License: MIT License
Price: free
More Information

360player.io

Most of the paid viewers (including this one) offer integration with your website with an iframe. That means no coding/installation required, all configuration is done with their online tools and you only need to embed add iframe to your pages. 360player.io offers a nice looking easy to use viewer that works in all modern (supporting WebGL) and most legacy and mobile browsers. Automatic image recognition, labeling and geo-tagging included. Prices start at $12/month (no free tier).

Supported projections: equirectangular
Price: from $12/month with unlimited uploads an
More Information

Panoraven

Commercial 360° photo viewer with a free plan for personal use. And you don't have to register to try it. You would have to register only if you need it for commercial use or want to manage your photos and customize viewers. Please note that the plan also defines your bandwidth limit, so make sure you choose one appropriate for your needs. Integration is done with an iframe.

Supported projections: equirectangular
Price: from $15/month with unlimited uploads. F
More Information

Kuula

Kuula positions their viewer as a tool for creating 360° virtual tours. It means your can add labels, hotspots, audio (and more) to your images. Mobile browsers are supported. Free tier is limited to 100 uploads per month, and they are public (actually displayed on their website), so be careful with what you upload.

Supported projections: equirectangular
Price: from $12/month (with annual subscription
More Information

Momento 360

This photo and video viewer offers virtual tours and albums creation and has integration with multiple CMS and blogging platforms. Links created by Momento 360 are shareable, meaning you can send them to your friends and they will be able to interact with your 360° content on Momento's website. Generic iframe integration is also available. Free tier is limited to 2GB storage with Momento360 branding. Cheapest plan is $4.99 a month (when billed annually), but surprise, it will also have Momento's branding enforced ¯_(ツ)_/¯. You'd need to pay at least $15 per month to turn that off.

Supported projections: equirectangular
Price: from $4.99/month (with annual subscripti
More Information

A-Frame

A-Frame is a web framework for building virtual reality (VR) experiences. A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js. Works on Vive, Rift, Daydream, GearVR, desktop.

Supported projections: equirectangular
License: MIT License
Price: free
More Information

Theasys

Powerful and sophisticated 360° Virtual Tour building platform. Includes VR Editor Features, Embed & Customization Options, Advanced Embed Options, Security & Performance, and more.

Supported projections: equirectangular
Price: free
More Information

360 Image Database for Face Object Detection

Craig Oda — Mon, 19 Aug 2019 23:41:44 +0000

TensorFlow is a great platform for experimentation with learning models. About a year ago, I did some experiments with using the TensorFlow samples inside of the RICOH THETA 360 camera. A GitHub repo of the samples is available to you to experiment with if you have a RICOH THETA V or Z1. You can also run the standard demos on an Android phone or AVD.

The main problem using the TensorFlow demos with a 360 camera was detection of objects in an equirectangular image. In the example below, you can see that the 360 image viewed in equirectangular format distorts the faces.

This makes it challenging to access an image network such as YOLO (You Only Look Once).

Recently, developer Amine Amri, put out a project that introduced me to FDDB-360, a dataset derived from Face Detection Dataset and Benchmark FDDB.

FDDB-360 contains 17,052 fisheye-looking images and a total of 26,640 annotated faces.

The dataset is available from http://www.sfu.ca/~ibajic/#data (J. Fu, S. R. Alvar, I. V. Bajić, and R. G. Vaughan,“FDDB-360: Face detection in 360-degree fisheye images,” Proc. IEEE MIPR’19 ,San Jose, CA, Mar. 2019).

Working Without 360 Image DB

The TensorFlow demos work surprisingly well with 360 images without modification if the face is in the middle of the vertical height of the image.

You can even detect and blur faces close to a stitch line as long as the face is in the center of the vertical height.

When to use a 360 image DB of faces

Your recognition will decrease when the face is captured above or below the center of the vertical height. The higher or lower it is, the more distortion you will experience. For the best chance of face detection, you should use a 360 image DB.

Next Steps

If you want to join the discussion around using TensorFlow with the RICOH THETA and 360 images, please check out Tensorflow apk for THETA V - Speech, object detection, stylized filters.