@@ -24,13 +24,13 @@ npm install @accounts/oauth --save
2424This example is written in Typescript - remove any type definitons if you are using plain JS.
2525
2626``` javascript
27- import { AccountsServer } from ' @accounts/server'
28- import { AccountsOauth } from ' @accounts/oauth'
27+ import { AccountsServer } from ' @accounts/server' ;
28+ import { AccountsOauth } from ' @accounts/oauth' ;
2929
3030// We create a new OAuth instance (with at least one provider)
3131const accountsOauth = new AccountsOauth ({
3232 // ... OAuth providers
33- })
33+ });
3434
3535// We pass the OAuth instance the AccountsServer service list
3636const accountsServer = new AccountsServer (... config, {
@@ -52,8 +52,7 @@ For Nextcloud, read [their docs](https://docs.nextcloud.com/server/19/admin_manu
5252
5353In the appropriate place of your app, place an "Authenticate via Nextcloud" button that will open a popup window for the user to authenticate via the OAuth provider.
5454
55- When receiving this code, the client will send it to the AccountsJS-based server, which will verify it with the provider (Nextcloud) itself (we will define the serverside part later).
56-
55+ When receiving this code, the client will send it to the AccountsJS-based server, which will verify it with the provider (Nextcloud) itself (we will define the serverside part later).
5756
5857``` typescript
5958import qs from ' qs' // https://www.npmjs.com/package/qs
@@ -81,7 +80,7 @@ function startNextcloudLogin () {
8180 const = e .data as string
8281 try {
8382 // Send this code to the AccountsJS-based server
84- await accountsClient .loginWithService (' oauth' ' nextcloud' code })
83+ await accountsClient .loginWithService (' oauth' ' nextcloud' code })
8584 // the 'provider' is key you specify in AccountsOauth config
8685 console .log (' User in LoginDialog success' user )
8786 user .value = await accountsClient .getUser ()
@@ -114,61 +113,63 @@ The OAuth provider will redirect to the specified `redirectUri` with a query str
114113The handler ` oauthLoginChannel.onmessage ` will use that code to authenticate against your app's accountsjs-based server.
115114
116115Register a route with your router. Example with vue-router:
116+
117117``` typescript
118118{ path : ' /oauth-callback/:service' component : () => import (' components/auth/OAuthCallback.vue'
119119```
120120
121121Define the handler (example based on vue-router):
122122
123123``` typescript
124- import qs from ' qs'
124+ import qs from ' qs' ;
125125
126126export default defineComponent ({
127- setup () {
128- const = useRouter ()
127+ setup() {
128+ const = useRouter ();
129129
130- const = route .value .params .service
131- console .log (' service:' service )
130+ const = route .value .params .service ;
131+ console .log (' service:' service );
132132
133133 onMounted (() => {
134- const = qs .parse (window .location .search , { ignoreQueryPrefix: true })
134+ const = qs .parse (window .location .search , { ignoreQueryPrefix: true });
135135
136- const = new BroadcastChannel (' oauthLoginChannel'
137- loginChannel .postMessage (queryParams .code ) // send the code
138- loginChannel .close ()
139- window .close ()
140- })
136+ const = new BroadcastChannel (' oauthLoginChannel' ;
137+ loginChannel .postMessage (queryParams .code ); // send the code
138+ loginChannel .close ();
139+ window .close ();
140+ });
141141
142- return { ... toRefs (data ), service }
143- }
144- })
142+ return { ... toRefs (data ), service };
143+ },
144+ });
145145```
146146
147147### Create the provider definition
148148
149149In the ` oauthLoginChannel.onmessage ` handler, we called:
150+
150151``` typescript
151- accountsClient .loginWithService (' oauth' ' nextcloud' code })
152+ accountsClient .loginWithService (' oauth' ' nextcloud' code });
152153```
153154
154155AccountsJS client will send that code to the server, where define a provider:
155156
156157``` typescript
157158const = new AccountsOauth ({
158159 nextcloud: new AccountsNextcloudProvider (),
159- })
160+ });
160161```
161162
162163The provider is defined like this:
164+
163165``` typescript
164166export class AccountsNextcloudProvider implements OAuthProvider {
165-
166167 /* This method is called when the user returns from the provider with an authorization code */
167168 async authenticate(params : any ): Promise <OAuthUser > {
168- // params.code is the auth code that nextcloud OAuth provides to the client
169+ // params.code is the auth code that nextcloud OAuth provides to the client
169170 // then LoginDialog sends the code here via accountsClient.loginWithService
170171 // it is used here to authenticate against nextcloud and to get the user info
171-
172+
172173 // Ask Nextcloud server if the code is valid, and which user it authenticates
173174 const = await axios .post (
174175 config .get (' accounts.oauth.nextcloud.token-endpoint' // see: https://docs.nextcloud.com/server/19/admin_manual/configuration_server/oauth2.html
@@ -182,12 +183,12 @@ export class AccountsNextcloudProvider implements OAuthProvider {
182183 headers: {
183184 ' Content-Type' ' application/x-www-form-urlencoded'
184185 },
185- },
186- )
186+ }
187+ );
187188
188- const = response .data
189- const : string = data .access_token
190- const : string = data .user_id
189+ const = response .data ;
190+ const : string = data .access_token ;
191+ const : string = data .user_id ;
191192
192193 // Optional - query Nextcloud for additional user info:
193194
@@ -209,19 +210,19 @@ export class AccountsNextcloudProvider implements OAuthProvider {
209210 // This data will be passed to the getRegistrationPayload below, and to createJwtPayload (see optional step later)
210211 return {
211212 id: userID ,
212- // data: userMeta, isAdmin, groups,
213- }
213+ // data: userMeta, isAdmin, groups,
214+ };
214215 }
215216
216217 /* If your server doesn't know the user yet, this method will be called to get initial user info to be stored in the DB */
217218 async getRegistrationPayload(oauthUser : OAuthUser ): Promise <any > {
218- console .log (' OAuth Registration payload for:' oauthUser )
219+ console .log (' OAuth Registration payload for:' oauthUser );
219220 return {
220221 // This is nextcloud-specific - TODO: Adapt to your provider
221222 // username: oauthUser.data.id,
222223 // email: oauthUser.data.email,
223224 // displayName: oauthUser.data.displayname,
224- }
225+ };
225226 }
226227}
227228```
@@ -230,7 +231,6 @@ export class AccountsNextcloudProvider implements OAuthProvider {
230231
231232This should be enough for a basic OAuth setup to work.
232233
233-
234234## Optional: Extend the JWT token
235235
236236In order to add custom fields to the JWT you need to pass a validateNewUser function when you instantiate the ` @accounts/password ` package.
@@ -241,7 +241,7 @@ new AccountsServer<ExtendedUserType>(
241241 createJwtPayload: async (data , user ) => {
242242 // data is the object returned from AccountsNextcloudProvider.authenticate
243243 // user is the user fetched from the db
244-
244+
245245 const nextcloudData = _ .get (user .services , ' nextcloud'
246246 if (! nextcloudData) {
247247 console .log (' Extending JWT skipped - no Nextcloud data' // seems to be called sometimes without the data
@@ -259,4 +259,3 @@ new AccountsServer<ExtendedUserType>(
259259 // ... services config
260260 )
261261```
262-
0 commit comments