hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'tusooa/1362-no-create-app-on-first-visit' into 'develop'

Browse source 
Create an app only when needed

See merge request pleroma/pleroma-fe!2073
This commit is contained in:
HJ 2025-03-10 13:30:37 +00:00
commit 7ba5e6d31c
12 changed files with 449 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/boot/after_store.js
View file

@ -11,7 +11,6 @@ import routes from './routes'
import VBodyScrollLock from 'src/directives/body_scroll_lock'
import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { applyConfig } from '../services/style_setter/style_setter.js'
import FaviconService from '../services/favicon_service/favicon_service.js'
@ -228,17 +227,8 @@ const getStickers = async ({ store }) => {
}
const getAppSecret = async ({ store }) => {
const { state, commit } = store
const { oauth, instance } = state
if (oauth.userToken) {
commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
} else {
return getOrCreateApp({ ...oauth, instance: instance.server, commit })
.then((app) => getClientToken({ ...app, instance: instance.server }))
.then((token) => {
commit('setAppToken', token.access_token)
commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
})
if (store.state.oauth.userToken) {
store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
}
}

24
src/components/login_form/login_form.js
View file

@ -34,16 +34,21 @@ const LoginForm = {
this.isTokenAuth ? this.submitToken() : this.submitPassword()
},
submitToken () {
const { clientId, clientSecret } = this.oauth
const data = {
clientId,
clientSecret,
instance: this.instance.server,
commit: this.$store.commit
}
oauthApi.getOrCreateApp(data)
.then((app) => { oauthApi.login({ ...app, ...data }) })
// NOTE: we do not really need the app token, but obtaining a token and
// calling verify_credentials is the only way to ensure the app still works.
this.$store.dispatch('ensureAppToken')
.then(() => {
const app = {
clientId: this.oauth.clientId,
clientSecret: this.oauth.clientSecret,
}
oauthApi.login({ ...app, ...data })
})
},
submitPassword () {
const { clientId } = this.oauth
@ -55,7 +60,14 @@ const LoginForm = {
}
this.error = false
oauthApi.getOrCreateApp(data).then((app) => {
// NOTE: we do not really need the app token, but obtaining a token and
// calling verify_credentials is the only way to ensure the app still works.
this.$store.dispatch('ensureAppToken').then(() => {
const app = {
clientId: this.oauth.clientId,
clientSecret: this.oauth.clientSecret,
}
oauthApi.getTokenWithCredentials(
{
...app,

108
src/modules/oauth.js
View file

@ -1,5 +1,27 @@
import { createApp, getClientToken, verifyAppToken } from 'src/services/new_api/oauth.js'
// status codes about verifyAppToken (GET /api/v1/apps/verify_credentials)
const isAppTokenRejected = error => (
// Pleroma API docs say it returns 422 when unauthorized
error.statusCode === 422 ||
// but it actually returns 400 (as of 2.9.0)
// NOTE: don't try to match against the error message, it is translatable
error.statusCode === 400 ||
// and Mastodon docs say it returns 401
error.statusCode === 401
)
// status codes about getAppToken (GET /oauth/token)
const isClientDataRejected = error => (
// Mastodon docs say it returns 401
error.statusCode === 401 ||
// but Pleroma actually returns 400 (as of 2.9.0)
// NOTE: don't try to match against the error message, it is translatable
error.statusCode === 400
)
const oauth = {
state: {
state: () => ({
clientId: false,
clientSecret: false,
/* App token is authentication for app without any user, used mostly for
@ -11,7 +33,7 @@ const oauth = {
* that need authorized user to be successful (i.e. posting, liking etc)
*/
userToken: false
},
}),
mutations: {
setClientData (state, { clientId, clientSecret }) {
state.clientId = clientId
@ -41,6 +63,88 @@ const oauth = {
// added here for smoother transition, otherwise user will be logged out
return state.userToken || state.token
}
},
actions: {
async createApp ({ rootState, commit }) {
const instance = rootState.instance.server
const app = await createApp(instance)
commit('setClientData', app)
return app
},
/// Use this if you want to get the client id and secret but are not interested
/// in whether they are valid.
/// @return {{ clientId: string, clientSecret: string }} An object representing the app
ensureApp ({ state, dispatch }) {
if (state.clientId && state.clientSecret) {
return {
clientId: state.clientId,
clientSecret: state.clientSecret
}
} else {
return dispatch('createApp')
}
},
async getAppToken ({ state, rootState, commit }) {
const res = await getClientToken({
clientId: state.clientId,
clientSecret: state.clientSecret,
instance: rootState.instance.server
})
commit('setAppToken', res.access_token)
return res.access_token
},
/// Use this if you want to ensure the app is still valid to use.
/// @return {string} The access token to the app (not attached to any user)
async ensureAppToken ({ state, rootState, dispatch, commit }) {
if (state.appToken) {
try {
await verifyAppToken({
instance: rootState.instance.server,
appToken: state.appToken
})
return state.appToken
} catch (e) {
if (!isAppTokenRejected(e)) {
// The server did not reject our token, but we encountered other problems. Maybe the server is down.
throw e
} else {
// The app token is rejected, so it is no longer useful.
commit('setAppToken', false)
}
}
}
// appToken is not available, or is rejected: try to get a new one.
// First, make sure the client id and client secret are filled.
try {
await dispatch('ensureApp')
} catch (e) {
console.error('Cannot create app', e)
throw e
}
// Note that at this step, the client id and secret may be invalid
// (because the backend may have already deleted the app due to no user login)
try {
return await dispatch('getAppToken')
} catch (e) {
if (!isClientDataRejected(e)) {
// Non-credentials problem, fail fast
console.error('Cannot get app token', e)
throw e
} else {
// the client id and secret are invalid, so we should clear them
// and re-create our app
commit('setClientData', {
clientId: false,
clientSecret: false
})
await dispatch('createApp')
// try once again to get the token
return await dispatch('getAppToken')
}
}
}
}
}

12
src/modules/users.js
View file

@ -1,5 +1,6 @@
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
import apiService from '../services/api/api.service.js'
import oauthApi from '../services/new_api/oauth.js'
import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
import { registerPushNotifications, unregisterPushNotifications } from '../services/sw/sw.js'
@ -527,11 +528,10 @@ const users = {
async signUp (store, userInfo) {
store.commit('signUpPending')
const rootState = store.rootState
try {
const data = await rootState.api.backendInteractor.register(
{ params: { ...userInfo } }
const token = await store.dispatch('ensureAppToken')
const data = await apiService.register(
{ credentials: token, params: { ...userInfo } }
)
if (data.access_token) {
@ -562,7 +562,9 @@ const users = {
instance: instance.server
}
return oauthApi.getOrCreateApp(data)
// NOTE: No need to verify the app still exists, because if it doesn't,
// the token will be invalid too
return store.dispatch('ensureApp')
.then((app) => {
const params = {
app,

28
src/services/new_api/oauth.js
View file

@ -1,12 +1,20 @@
import { reduce } from 'lodash'
import { StatusCodeError } from 'src/services/errors/errors.js'
const REDIRECT_URI = `${window.location.origin}/oauth-callback`
export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) => {
if (clientId && clientSecret) {
return Promise.resolve({ clientId, clientSecret })
export const getJsonOrError = async (response) => {
if (response.ok) {
return response.json()
.catch((error) => {
throw new StatusCodeError(response.status, error, {}, response)
})
} else {
throw new StatusCodeError(response.status, await response.text(), {}, response)
}
}
export const createApp = (instance) => {
const url = `${instance}/api/v1/apps`
const form = new window.FormData()
@ -19,9 +27,16 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
method: 'POST',
body: form
})
.then((data) => data.json())
.then(getJsonOrError)
.then((app) => ({ clientId: app.client_id, clientSecret: app.client_secret }))
.then((app) => commit('setClientData', app) || app)
}
export const verifyAppToken = ({ instance, appToken }) => {
return window.fetch(`${instance}/api/v1/apps/verify_credentials`, {
method: 'GET',
headers: { Authorization: `Bearer ${appToken}` }
})
.then(getJsonOrError)
}
const login = ({ instance, clientId }) => {
@ -92,7 +107,7 @@ export const getClientToken = ({ clientId, clientSecret, instance }) => {
return window.fetch(url, {
method: 'POST',
body: form
}).then((data) => data.json())
}).then(getJsonOrError)
}
const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
const url = `${instance}/oauth/mfa/challenge`
@ -144,7 +159,6 @@ const oauth = {
login,
getToken,
getTokenWithCredentials,
getOrCreateApp,
verifyOTPCode,
verifyRecoveryCode,
revokeToken