Add apple oauth (#1107)

* uses a PR branch for django-allauth that adds Apple login, hopefully this gets merged to master
* the feature will be "hidden" via a django-waffle feature flag

open_humans/settings.py

@@ -172,6 +172,7 @@ def to_bool(env, default="false"):
     "allauth",
     "allauth.account",
     "allauth.socialaccount",
+    "allauth.socialaccount.providers.apple",
     "allauth.socialaccount.providers.facebook",
     "allauth.socialaccount.providers.google",
     "bootstrap_pagination",
@@ -522,5 +523,7 @@ def to_bool(env, default="false"):
     }
 
     SECURE_SSL_REDIRECT = True
+    SESSION_COOKIE_SECURE = True
+    CSRF_COOKIE_SECURE = True
 
     django_heroku.settings(locals())

open_humans/templates/account/login-social-bs4.html

@@ -1,6 +1,7 @@
 {% load socialaccount %}
 {% load static %}
 {% load utilities %}
+{% load waffle_tags %}
 
 <!-- Facebook button style based on the appearance here:
 https://developers.facebook.com/docs/facebook-login/web/login-button
@@ -23,7 +24,22 @@
   <a href="{% provider_login_url "google" %}"
      class="btn login-button google-button redirect-storage-link mb-3">
     <div style="background:#fff; width:24px; height:24px; margin-right: 12px; border-radius: 2px; padding-top: 2px; display:inline-block;">
-      <img alt="Google Login" title="Google Login" style="margin-left:4px;margin-bottom:4px;" src="/static/images/google-logo-g.png" width="15">
+      <img alt="Google Login" title="Google Login" style="margin-left:5px;margin-bottom:5px;" src="/static/images/google-logo-g.png" width="15">
     </div> Continue with Google
   </a>
 </div>
+
+{% flag "applelogin" %}
+<!-- Apple button style based on assets and guidelines here:
+  https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
+-->
+<div class="login-button-div">
+  <a href="{% provider_login_url "apple" %}"
+     class="btn login-button apple-button redirect-storage-link p-0">
+    <div style="margin-right:10px; display:inline-block;">
+      <img alt="Apple Login" title="Apple Login" style="margin-left:6px;margin-top:-2px;" src="/static/images/apple-logo-white-large-3x.png" height="33">
+    </div>
+    <div style="display:inline-block; padding-top: 7px;">Continue with Apple</div>
+  </a>
+</div>
+{% endflag %}

open_humans/templates/account/login-social.html

@@ -1,6 +1,7 @@
 {% load socialaccount %}
 {% load static %}
 {% load utilities %}
+{% load waffle_tags %}
 
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
@@ -14,7 +15,7 @@
   <a href="{% provider_login_url "facebook" method="oauth2" %}"
      class="btn btn-lg btn-primary login-button fb-button redirect-storage-link">
     <img alt="Facebook Login" title="Facebook login" class="login-logo"
-        src="{% static 'images/FB-F.png' %}" width="25" height="25" style="margin-right:8px;"> Continue with Facebook
+        src="{% static 'images/FB-F.png' %}" width="22" height="22" style="margin-right:8px;"> Continue with Facebook
   </a>
 </div>
 
@@ -24,9 +25,24 @@
 <div class="login-button-div">
   <a href="{% provider_login_url "google" %}"
      class="btn btn-lg btn-primary login-button google-button redirect-storage-link">
-    <div style="background:#fff; width:25px; height:25px; margin-right: 8px; border-radius: 2px; padding-top: 2px; display:inline-block;">
-      <img alt="Google Login" title="Google Login" class="login-logo" style="margin-left:5px;"
+    <div style="background:#fff; width:22px; height:22px; margin-right: 8px; border-radius: 2px; display:inline-block;">
+      <img alt="Google Login" title="Google Login" class="login-logo" style="margin-left:4px;"
          src="{% static 'images/google-logo-g.png' %}" width="15">
     </div> Continue with Google
   </a>
 </div>
+
+{% flag "applelogin" %}
+<!-- Apple button style based on assets and guidelines here:
+  https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
+-->
+<div class="login-button-div">
+  <a href="{% provider_login_url "apple" %}"
+     class="btn btn-lg btn-primary login-button apple-button redirect-storage-link" style="padding:0px;">
+    <div style="margin-right:5px; display:inline-block;">
+      <img alt="Apple Login" title="Apple Login" style="margin-left:6px;" src="/static/images/apple-logo-white-large-3x.png" height="33">
+    </div>
+    <div style="display:inline-block; padding-top: 9px;">Continue with Apple</div>
+  </a>
+</div>
+{% endflag %}

open_humans/templates/socialaccount/authentication_error.html

@@ -8,4 +8,13 @@
 <h1>{% trans "Social Network Login Failure" %}</h1>
 
 <p>{% trans "An error occurred while attempting to login via your social network account." %}</p>
+
+{% comment %}
+<p>
+  <b>Auth error: </b> {{ auth_error }}
+  <b>Provider: </b> {{ auth_error.provider }}<br>
+  <b>Code: </b> {{ auth_error.code }}<br>
+  <b>Exception: </b> {{ auth_error.exception }}
+</p>
+{% endcomment %}
 {% endblock %}

requirements.in

@@ -1,5 +1,8 @@
 -e git+https://github.com/beaugunderson/django-storages-s3upload.git#egg=django-storages-s3upload
 
+# 20200507 Added to enable Apple OAuth from a feature PR in progress.
+-e git+https://github.com/madprime/django-allauth.git@9421e182159258d28cf234d1c40d0d6cdab8e24d#egg=django-allauth
+
 ansicolors
 arrow
 beautifulsoup4
@@ -9,7 +12,6 @@ brotlipy
 celery==4.3.0
 dj-database-url
 Django==2.2.10
-django-allauth
 django-appconf
 django-autoslug
 django-bootstrap-pagination

requirements.txt

@@ -4,26 +4,27 @@
 #
 #    pip-compile requirements.in
 #
+-e git+https://github.com/madprime/django-allauth.git@9421e182159258d28cf234d1c40d0d6cdab8e24d#egg=django-allauth
 -e git+https://github.com/beaugunderson/django-storages-s3upload.git#egg=django-storages-s3upload
 amqp==2.5.2               # via kombu
 ansicolors==1.1.8
 arrow==0.15.5
 beautifulsoup4==4.9.0
 billiard==3.6.3.0         # via celery
 bleach==3.1.4
-boto3==1.12.39
+boto3==1.12.41
 boto==2.49.0
-botocore==1.15.39         # via boto3, s3transfer
+botocore==1.15.41         # via boto3, s3transfer
 brotlipy==0.7.0
 celery==4.3.0
 certifi==2020.4.5.1       # via requests
-cffi==1.14.0              # via brotlipy
+cffi==1.14.0              # via brotlipy, cryptography
 chardet==3.0.4            # via requests
 configparser==5.0.0       # via tini
 coverage==5.1             # via django-coverage-plugin
+cryptography==2.9         # via pyjwt
 defusedxml==0.6.0         # via python3-openid
 dj-database-url==0.5.0
-django-allauth==0.41.0
 django-appconf==1.0.4
 django-autoslug==1.9.7
 django-bootstrap-pagination==1.7.1
@@ -68,26 +69,27 @@ pillow==7.1.1
 psutil==5.7.0             # via django-gulp
 psycopg2==2.8.5           # via django-heroku
 pycparser==2.20           # via cffi
+pyjwt[crypto]==1.7.1
 pylibmc==1.5.2
 pyparsing==2.4.7
 python-dateutil==2.8.1    # via arrow, botocore, faker
 python-magic==0.4.15
-python3-openid==3.1.0     # via django-allauth
+python3-openid==3.1.0
 pytz==2019.3              # via celery, django
 raven==6.10.0
 redis==3.4.1
-requests-oauthlib==1.3.0  # via django-allauth
+requests-oauthlib==1.3.0
 requests==2.23.0
 s3transfer==0.3.3         # via boto3
 selenium==3.141.0
-six==1.14.0               # via bleach, django-coverage-plugin, django-extensions, django-waffle, env-tools, python-dateutil, tini
+six==1.14.0               # via bleach, cryptography, django-coverage-plugin, django-extensions, django-waffle, env-tools, python-dateutil, tini
 sorl-thumbnail==12.6.3
 soupsieve==2.0            # via beautifulsoup4
 sqlparse==0.3.1           # via django, django-debug-toolbar
 termcolor==1.1.0
 text-unidecode==1.3       # via faker
 tini==3.0.1               # via env-tools
-urllib3==1.25.8           # via botocore, requests, selenium
+urllib3==1.25.9           # via botocore, requests, selenium
 vine==1.3.0               # via amqp, celery
 webencodings==0.5.1       # via bleach
 whitenoise==5.0.1         # via django-heroku

static/css/_buttons.css

@@ -156,7 +156,7 @@
 .login-button {
   border-radius: 5px;
   border: none;
-  height: 40px;
+  height: 37px;
   width: 100%;
   font-size: 1em;
   padding: 8px;
@@ -210,3 +210,16 @@
       }
     }
 }
+
+
+.apple-button {
+  background-color: #000;
+
+  &:hover, &:focus {
+    background-color: #000;
+
+    &:active, .active {
+      background-color: #000;
+    }
+  }
+}

static/scss/oh-proj-theming.scss

@@ -324,6 +324,24 @@ btn.btn-xs {
   }
 }
 
+.apple-button {
+  background-color: #000;
+  border-color: #000;
+  color: white;
+
+  &:hover, &:focus {
+    background-color: #000;
+    border-color: #000;
+    color: white;
+
+    &:active, .active {
+      background-color: #000;
+      border-color: #000;
+      color: white;
+    }
+  }
+}
+
 /* Activity page specific */
 .activity-badge-maxh10rem {
   max-height:10rem;