FriendsOfFlarum OAuth

sdgsdgsd

When i try to login with google it gives "Errore 400: redirect_uri_mismatch" error, on my website. I've tried on another flarum website too and it gives the same error, so i don't know what to do.

JayCasee

Do you have any plans to make the OAuth buttons design consistency to fit with the entire Flarum...?
Especially about the width, height and margin-bottom.

width: 100%; to keep a consistency with the below buttons.
height: 50px;
margin-bottom: 12px;

At the same time, about the Google button, I've realized that the current design is slightly out of its policy as well.
https://developers.google.com/identity/branding-guidelines

font-family: roboto; as the guide says.
margins ...

FYI, in my case, I'm putting a long footer code as below to just wrap the Google button, simultaneously.
I know this is a minor issue, but I'm just leaving my opinion.

Example

<style>
  @import url( 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap' );
  .Modal-body .LogInButtons { width : 100%; margin-bottom: 12px; position: relative; }
  .Modal-body .LogInButton  { height: 50px; margin-bottom: 12px;                     }
</style>
<script>
function jc_swap_google() {
if( ! document.getElementById( 'jc_swap_google'            ) ) {
  if( document.querySelector ( '.LogInModal .LogInButtons' ) ) {
    const newElement = document.createElement('div');
    newElement.innerHTML = `
      <button id="jc_swap_google" onclick="event.preventDefault(); document.querySelector( '.Modal-body .LogInButton--google' ).click()" style="-pointer-events: none; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 50px; margin-bottom: 12px;" class="gsi-material-button"><div class="gsi-material-button-state"></div><div class="gsi-material-button-content-wrapper"><div class="gsi-material-button-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></svg></div><span class="gsi-material-button-contents">Sign in with Google</span><span style="display: none;">Sign in with Google</span></div></button>
      <style>.gsi-material-button{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-appearance: none; background-color: #131314; background-image: none; border: 1px solid #747775; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #e3e3e3; cursor: pointer; font-family: 'Roboto', arial, sans-serif; font-size: 14px; height: 40px; letter-spacing: 0.25px; outline: none; overflow: hidden; padding: 0 12px; position: relative; text-align: center; -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s; transition: background-color .218s, border-color .218s, box-shadow .218s; vertical-align: middle; white-space: nowrap; width: auto; max-width: 400px; min-width: min-content; border-color: #8e918f;} .gsi-material-button .gsi-material-button-icon{ height: 20px; margin-right: 12px; min-width: 20px; width: 20px;} .gsi-material-button .gsi-material-button-content-wrapper{ -webkit-align-items: center; align-items: center; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; height: 100%; justify-content: center; position: relative; width: 100%;} .gsi-material-button .gsi-material-button-contents{ -webkit-flex-grow: 0; flex-grow: 0; font-family: 'Roboto', arial, sans-serif; font-weight: 500; overflow: hidden; text-overflow: ellipsis; vertical-align: top;} .gsi-material-button .gsi-material-button-state{ -webkit-transition: opacity .218s; transition: opacity .218s; bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0;} .gsi-material-button:disabled{ cursor: default; background-color: #13131461; border-color: #8e918f1f;} .gsi-material-button:disabled .gsi-material-button-state{ background-color: #e3e3e31f;} .gsi-material-button:disabled .gsi-material-button-contents{ opacity: 38%;} .gsi-material-button:disabled .gsi-material-button-icon{ opacity: 38%;} .gsi-material-button:not(:disabled):active .gsi-material-button-state, .gsi-material-button:not(:disabled):focus .gsi-material-button-state{ background-color: white; opacity: 12%;} .gsi-material-button:not(:disabled):hover{ -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);} .gsi-material-button:not(:disabled):hover .gsi-material-button-state{ background-color: white; opacity: 8%;} </style>
    `;
    document.querySelector( '.LogInModal .LogInButtons' ).appendChild( newElement );
  } // if
} else document.removeEventListener( 'transitionend', jc_swap_google );
} // funtion
document.addEventListener( 'transitionend', jc_swap_google, true )
</script>
```

sdgsdgsd

It should work for me now because i found out by myself how to use it, but now i get the "Oops!" error, i've checked the logs and the principal error was "Intervention\Image\Exception\NotReadableException: Unable to init from given url (https://lh3.googleusercontent.com/a/ACgVRhXcensoredcmmbeu2m0_Yvc2gohGPdb-jgLVp=s96-c).".

davetodave178

1.6.11

What's Changed

chore(deps): bump webpack from 5.90.1 to 5.94.0 in /js by @dependabot in #80
fix: buttons on security page dont work by @luceos in #81

Full Changelog: 1.6.10...1.6.11

TehPurpleOne

Trying to get GitLab setup on my forum, but I'm unsure what to put into the GitLab Domain portion of the extention's options. https://www.gitlab.com/ doesn't seem to work.

Also getting the following error when using Twitter's authentication:
Received HTTP status code [401] with message "{"errors":[{"code":32,"message":"Could not authenticate you."}]}" when getting temporary credentials.

iliketrains

Is there a way to allow sign up only using oauth?

davetodave178

iliketrains Yes, there is a permission that allows you to open or close sign-ups in the permissions panel. I'm 99% sure that sign-ups through OAuth will still work when Flarum based sign-ups are closed.

davetodave178

1.6.13

What's Changed

Create Reusable Util for Opening OAuth Popup by @davetodave178 in FriendsOfFlarum/oauth83

Full Changelog: FriendsOfFlarum/oauth1.6.12 → 1.6.13

Aeternum

Would love to see authentication with username and password via firebase

davetodave178

Aeternum I'm not aware that Firebase itself is an OAuth Provider. As that is owned by Google, you would normally use Google OAuth. Can you please clarify?

ericbsd

I discovered that my Forum Login with GitHub goes to 404, and my Login with Discord goes to invalid From Body. I wonder if I am missing something.

ericbsd

ericbsd Nevermind I did not set OAuth on those sides.

« Previous Page